caret-color
The caret-color CSS property sets the color of the insertion caret, sometimes referred to as the text input cursor. This is the visible marker appearing at the insertion point where the next character typed will be added or where the next character deleted will be removed.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 57 | 79 | 53 | 11.1 | 57 | 11.3 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Brand-color caret */
input, textarea {
caret-color: #6366f1;
}
/* Dark mode */
.dark input {
caret-color: #a5b4fc;
color: #f1f5f9;
background: #1e293b;
}Live demo
Use cases
-
Using caret-color
The caret-color CSS property sets the color of the insertion caret, sometimes referred to as the text input cursor.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.