Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >caret-color

caret-color

caret-color: auto | <kolor>

Kolor migającego kursora tekstowego, który pokazuje, gdzie będziesz pisać – w input, textarea i elementach z atrybutem contenteditable.

Wartości

  • auto – domyślnie: zwykle kolor tekstu (currentColor).
  • kolor – dowolny kolor; transparent ukrywa kursor tekstowy.

Wartość początkowa: auto. Dziedziczona: tak. Dotyczy: wszystkich elementów (widać przy edytowalnych).

Przykłady

Kliknij w podglądzie w pole – kursor tekstowy jest różowy:

<input class="field" type="text" value="Kliknij tutaj">

.field {
  padding: 6px 8px;
  font-size: 18px;
  caret-color: #e91e63;
}
Wynik

Na co uważać

  • Nie ukrywaj kursora tekstowego w zwykłych polach (transparent) – użytkownik nie będzie wtedy wiedział, gdzie pisze.
  • Kolor kursora tekstowego powinien mieć dość kontrastu z tłem pola, inaczej się zgubi.
  • Zmienia tylko kursor tekstowy, nie wskaźnik myszy – ten ustawia właściwość cursor.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od stycznia 2020, za szeroko dostępne uznawane od lipca 2022. Od wersji: Chrome 57, Firefox 53, Safari 11.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
accent-color
color
cursor
:focus