PHPnews.io

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

Written by Bram.us / 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` 👋 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:

css-caret-color.jpg

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

terminal-cursor.gif

~

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 »