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

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/

'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"/>

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 .

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;}

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.