Właściwość CSSInterakcja i inne
caret-color
Ustawia kolor kursora tekstowego w polach do pisania.
- Wartość domyślna
auto- Dziedziczona
- Tak
- Animowalna
- tak, jako kolor
- Dotyczy
- wszystkie elementy, efekt widać w polach edytowalnych
- JavaScript
element.style.caretColor = "#a78bfa"
Przykład
#CSS
.code-editor {
caret-color: #facc15;
}HTML przykładu
<textarea spellcheck="false" style="width: 100%; height: 70px; padding: 8px; font-family: monospace; background: #0a0a0b; caret-color: #facc15; border-radius: 8px;">const lesson = "CSS"</textarea>Podgląd
Definicja i zastosowanie
#Właściwość caret-color zmienia kolor migającej kreski, która pokazuje miejsce wpisywania w polach <input>, <textarea> i elementach z contenteditable.
Domyślnie (auto) kursor ma zwykle kolor tekstu. Własny kolor pomaga dopasować pola do motywu strony albo wyróżnić aktywne pole.
Wartość transparent ukrywa kursor, ale rób to tylko w wyjątkowych przypadkach, na przykład w polach, które wyglądają jak klawiatura ekranowa.
Składnia
#Składnia
caret-color: auto | <kolor>;Wartości
#Wartości w praktyce
#auto
Kursor w kolorze tekstu.
.demo { caret-color: auto; }#f43f5e
Czerwony kursor.
.demo { caret-color: #f43f5e; }#a78bfa
Fioletowy kursor dopasowany do akcentu.
.demo { caret-color: #a78bfa; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W edytorach kodu jaskrawy kursor ułatwia śledzenie miejsca pisania.
- Nie ukrywaj kursora w zwykłych polach, bo użytkownik nie będzie wiedział, gdzie pisze.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.