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` 👋 pic.twitter.com/ndcDUjN13R
— Álvaro Trigo 🐦🔥 (@IMAC2) November 24, 2020
Example:
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 CanIUse.com 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 🙂