Styling sisipan input teks


118

Saya ingin memberi gaya sisipan yang fokus <input type='text'/>. Khususnya, warna dan ketebalannya.


1
Nah, ini untuk <input type="text"/>saya kira
Benjamin Crouzier

Dia ingin memberi gaya pada tanda sisipan, pertanyaan dan tag yang diedit
Benjamin Udink ten Cate

Mohon pertimbangkan untuk mengubah jawaban yang diterima. Mengingat perubahan CSS terbaru, jawaban terbaru Michael Jasper jauh lebih unggul: stackoverflow.com/a/7339406/1889273
Boaz

Jawaban:


74

Jika Anda menggunakan browser webkit, Anda dapat mengubah warna tanda sisipan dengan mengikuti cuplikan CSS berikutnya. Saya tidak yakin apakah mungkin untuk mengubah format dengan CSS.

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Berikut ini contohnya: http://jsfiddle.net/8k1k0awb/


3
Peretasan yang cerdas, tetapi emoji tidak berfungsi karena hanya diisi oleh bayangan 😭
simbolo

Hmm, bayangan tidak diperlukan untuk efek dalam kasus saya (desktop Chrome dan FF) - cukup edit warna isian teks lalu masukan.
Velda

86

'Caret' adalah kata yang Anda cari. Saya percaya meskipun, itu adalah bagian dari desain browser, dan bukan dalam pemahaman css.

Namun, berikut adalah tulisan menarik tentang simulasi perubahan tanda sisipan menggunakan Javascript dan CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Sepertinya agak hacky bagi saya, tapi mungkin satu-satunya cara untuk menyelesaikan tugas. Poin utama dari artikel ini adalah:

Kami akan memiliki textarea biasa di suatu tempat di layar keluar dari tampilan penampil dan ketika pengguna mengklik "terminal palsu" kami, kami akan fokus ke textarea dan ketika pengguna mulai mengetik kami hanya akan menambahkan data yang diketik ke dalam textarea ke "terminal" kami dan hanya itu.

DI SINI adalah demo beraksi


Pembaruan 2018

Ada properti css barucaret-color yang berlaku untuk tanda sisipan inputatau contenteditablearea. Dukungan tumbuh tetapi tidak 100%, dan ini hanya mempengaruhi warna, bukan lebar atau jenis penampilan lainnya.

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>


38

Dalam CSS3, sekarang ada cara yang asli untuk melakukan hal ini, tanpa ada hacks disarankan dalam jawaban yang ada: yang caret-colorproperti .

Ada banyak hal yang dapat Anda lakukan dengan tanda sisipan, seperti yang terlihat di bawah ini. Bahkan bisa dianimasikan .

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

The caret-colorproperti didukung dari Firefox 55, dan Dukungan 60. Chrome juga tersedia di Safari Technical Preview dan Opera (tetapi belum di Ujung). Anda dapat melihat tabel dukungan saat ini di sini .


1
Pukul aku sampai habis. Tentu saja, properti ini hanya akan berfungsi di Firefox, setidaknya untuk saat ini, dan tidak dirilis hingga April 2017. Lihat halaman ini .
SpyderScript

6

Berikut beberapa vendor yang mungkin saya cari

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

Anda juga dapat mengatur gaya status berbeda, seperti fokus

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Anda juga dapat melakukan transisi tertentu padanya, seperti

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

5
Ini berguna untuk memberi gaya pada teks placholder, namun tidak memberi gaya tanda sisipan berkedip yang dirujuk OP.
craignewkirk

4

Cukup menggunakan properti warna bersama dengan -webkit-text-fill-color dengan cara ini:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

Berfungsi di browser WebKit (tetapi tidak di Safari iOS, yang masih menggunakan warna sistem untuk tanda sisipan) dan juga di Firefox.

Properti -webkit-text-fill-color CSS menentukan warna isian dari karakter teks . Jika properti ini tidak disetel, nilai properti warna digunakan. MDN

Jadi ini berarti kita mengatur warna teks dengan warna isian teks dan warna tanda sisipan dengan properti warna standar. Di browser yang tidak didukung, tanda sisipan dan teks akan memiliki warna yang sama - warna tanda sisipan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.