caret-color

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

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.

See the Pen caret-color by Chris Coyier (@chriscoyier) on CodePen.

See the Pen rainbowcaret by PINT, Inc. (@PINT) on CodePen.

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.

See the Pen Caret Color by ilwcss (@ilwcss) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
574453NoNoTP

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNo566156
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag