Customise the caret color with the CSS `caret-color` property

Written by / Original link on Dec. 2, 2020

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:

There are CSS properties I never heard of before!

Hello `caret-color` 👋

— Álvaro Trigo 🐦🔥 (@IMAC2) November 24, 2020


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:


💡 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 🙂

bram tutorialzine forms input bram

« Abstract Objects - BlurHash — Low-res Blurred Placeholder Images Represented as Text »