Customise the caret color with the CSS caret-color property

Thanks to this tweet by Álvaro Trigo I found out that you can change the color of the caret β€” that little blinking | in text inputs β€” using the caret-color CSS property:


input {
  caret-color: red;

πŸ’β€β™‚οΈ Do note that the caret-color defaults to currentColor, so you don’t need to manually match the color set on an element.


Browser support is really great:

Data on support for the css-caret-color feature across the major browsers from

πŸ’‘ Shown above is a live table, showing an always up-to-date support table. By the time you are reading this browser support might have become better.


Wondering if there were more caret-* properties this turned out to be not the case. A pity though, as I can think of cases where I would like to set the caret-height and caret-thickness, such as emulating the cursor of a terminal:


As a fun little experiment Tim Carambat created a Pen that changes the caret color from green to yellow to red as you near the maxlength of the <textarea> you’re typing in.

See the Pen
Color Changing Cursor in TextArea
by Timothy Carambat (@rambat1010)
on CodePen.

Usability-wise this isn’t that great, but it’s fun nonetheless πŸ™‚

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.