caret-color
The caret-color CSS property sets the color of the text insertion pointer in a text input.
Overview
The caret-color CSS property sets the color of the text insertion pointer in a text input.
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 text insertion pointer in a text input.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features