Happy holiday folks! All the best from us at Digitpaint

Day 9

A christmas caret(-color)

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.

Let's kick this off with a little demo. If the JavaScript gods were kind, the first input below should be focussed and you'll see the caret is red.

Click in the input fields below and watch the caret

What does it do?

The 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.

Useful?

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.

Compatible with

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.

  • chrome
  • firefox
  • safari Technology Preview
  • android chrome

More detailed information on caniuse.com

Read more

Demo source code

Dig deeper into caret-color and view the source!

Back to home