`caret-color` în CSS

Design Responsiv și Interfață Chrome 57, Firefox 53, Safari 11.1

Schimbă culoarea cursorului de scriere (bara care clipește) din câmpurile de text și din elementele editabile.

Sintaxă CSS

caret-color: auto;
caret-color: #dc2626;
caret-color: transparent;

Ce face `caret-color`

Cursorul de text (caret) are implicit culoarea textului din câmp (auto). caret-color îi dă o culoare proprie, de exemplu culoarea de accent a site-ului, pentru a fi mai ușor de găsit.

Se aplică la input, textarea și elementele cu contenteditable. Proprietatea se moștenește, deci o poți pune o singură dată pe un formular sau pe body.

Valoarea transparent ascunde cursorul; se folosește rar, de exemplu la câmpuri de cod PIN cu afișare personalizată.

Valori uzuale

Valoare	Descriere
`auto`	Culoarea implicită (de obicei currentColor, culoarea textului).
`<culoare>`	Orice culoare CSS: #dc2626, rgb(), oklch().
`transparent`	Cursorul nu se vede, dar câmpul rămâne editabil.

Exemple

Exemplul 1: Cursor de scriere în culoarea de accent a formularului

Textul rămâne gri închis, cursorul este albastru.

.formular-contact input,
.formular-contact textarea {
  color: #1e293b;
  caret-color: #2563eb;
}

Efect vizual în browser

Când Ana scrie „Iași, str. Lăpușneanu 12” în câmpul de adresă, literele sunt gri închis, iar bara care clipește este albastră.

Exemplul 2: Câmp de cod invalid semnalat și prin cursor

Pe lângă chenarul roșu, și cursorul devine roșu.

input.cod-gresit {
  border-color: #dc2626;
  caret-color: #dc2626;
}