CSS Almanac → Properties → C → caret-color

caret-color

Chris Coyier on Updated on
##description##
Ad
`, } ); } })();
See More

The caret-color property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like:

input,
textarea,
[contenteditable] {
  caret-color: red;
}

The color of the caret generally matches the color of the text, but this property allows you to change those independently.

Faking it

Before this existed there was a method for faking it involving forcing the text to be transparent (where supported via -webkit-text-fill-color) and making the text show back up, colorized, via text-shadow.

Browser Support

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
This comment thread is closed. If you have important information to share, please contact us.