caret-color în 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;
}

Efect vizual în browser

Câmpul pentru codul de reducere are chenar roșu, iar cursorul care clipește în el este tot roșu.

Greșeli frecvente

• Alegerea unei culori cu contrast slab față de fundalul câmpului; cursorul devine greu de găsit, exact opusul scopului.
• Folosirea caret-color: transparent fără un indicator alternativ; utilizatorul nu mai știe unde va apărea textul.
• Confuzia cu cursor; cursor schimbă săgeata mouse-ului, caret-color schimbă bara de scriere din text.

Comenzi înrudite

• cursor: Stabilește forma cursorului mouse-ului când acesta plutește deasupra unui element, oferind indicii clare de utilizare.
• accent-color: Personalizează instantaneu culoarea controalelor native de formular (checkbox, radio, range, progress) dintr-o singură linie.
• color: Setează culoarea textului și a elementelor decorative asociate (sublinieri, borduri implicite).