caret-color CSS property for editable HTML elements

Nov 24 2020

CSS

Today I came across a css property called caret-color. It is such a cool little feature, and it is supported by all major browsers.

What does it do?

This caret-color CSS property changes the color of the cursor (or caret) in any editable element, like inputs, text areas, or any contenteditable div.

Example

PFB the div which is content editable and I have changed its caret-color to be hexcode - #3ed372.

Try editing it and see the magic.

Hello there, I am an editable div. Look at my caret-color. Isn't it pretty?

Code

<div 
  tab-index="0"
  style="caret-color: #3ed372;"
  contenteditable>
    Hello there, I am an editable div.
</div>

References

All code tips