Today we'll take a closer look at the
caret-color CSS property. So who's this caret person? The caret is also known as the text cursor, or if you want to be visual, the blinking thin line when you're editing text.
Click in the input fields below and watch the caret
What does it do?
caret-color CSS property sets the color of the insertion caret, within an element such as an input, textarea or an element with the
contenteditable attribute set. As with most color CSS values we can animate/transition them. Which is what we do in the second example.
In itself it might not look like that big of a deal, and it's not. But it helps in adding finishing touches to your UI.
Basically Chrome and FireFox. It has been sighted in Safari Technology Preview but there is no word from Microsoft on the feature request at the time of writing.
- safari Technology Preview
- android chrome
Demo source code
Dig deeper into
caret-color and view the source!