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 }
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 |