Przejdź do treści

Kolor karetki tekstowej {caret-color}

W jaki sposób zmienić kolor migającego wskaźnika (karetki, kursora), który pojawia się podczas wpisywania tekstu z klawiatury?

CSS 3

selektor { caret-color: kolor }
Selektorem może być element interaktywny, w którym użytkownik może wpisywać tekst, np. textarea, input[type="text"].

Natomiast jako "kolor" należy podać definicję koloru albo wartość auto (zresetowanie karetki testowej do domyślnego koloru).

W przypadku interaktywnych elementów strony, w których można wpisywać tekst, pojawia się tzw. karetka. Wskazuje ona miejsce, w którym pojawią nowe znaki tekstu, kiedy zaczniemy je wpisywać z klawiatury. Karetka tekstowa najczęściej ma postać pionowej, migającej kreski. Zdarzają się jednak inne kształty: pionowa kreska z krótkim poziomym daszkiem i podstawką albo migająca, wypełniona kratka (zwłaszcza na terminalach tekstowych o ograniczonej rozdzielczości).

Domyślnie karetka tekstowa zwykle przyjmuje taki sam kolor jak tekst. Przez to czasami może zostać pomylona np. z wielką literą "I" albo małą literą "l". Może się też zdarzyć, że ze względu na dobrany kolor tła, kontrast pomiędzy nim a karetką tekstu nie będzie wystarczający, więc będzie ona słabo widoczna, co utrudni użytkownikowi wprowadzanie tekstu. W takich przypadkach mamy możliwość ustalenia innego koloru karetki tekstowej.

Przykład {caret-color}







Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
caret-color: wartość57
2017-03-09
53
2017-04-19
79
2020-01-15
44
2017-03-21
11.1
2018-04-12

Komentarze

Zobacz więcej komentarzy

Facebook