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
Chrome | Opera | Firefox | IE | Edge | Safari |
---|---|---|---|---|---|
57 | 44 | 53 | No | No | 11.1 |
Mobile / Tablet
iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
---|---|---|---|---|---|
No | No | No | 62 | 64 | 57 |