Caret Color Property
Last updated: 2026-09-13
caret-color Caret Color Property
The caret-color property sets the color of the caret — the blinking vertical bar — in editable elements such as inputs and text areas. Customizing the caret color lets form elements match the page palette or highlights the current input position.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
caret-color: auto | <color>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | The default caret color |
<color> | Type | The caret color |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| caret-color | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： auto is the default and usually matches the element's text color; setting a specific color overrides it independently.
Tip： caret-color is an inherited property, so you can set it once on a parent and children inherit the color.
❓ FAQ
QWhich color formats does the caret-color property support in CSS?
AAll CSS color formats: keywords (red, blue), hex (#3498db), rgb()/rgba(), hsl()/hsla(), and special values like currentColor. auto is the default, making the caret follow the element's text color. It also supports transitioning the color via animation, although that is rarely used in practice.
QWhat is the difference between caret-color and cursor in CSS?
Acaret-color sets the color of the text caret (the blinking vertical bar) inside inputs and text areas — editable content. cursor sets the shape of the mouse pointer when hovering over an element — pointer-device feedback. The names sound similar, but the objects are completely different: one is the content caret, the other the mouse pointer.
QWhy is the caret-color property not having any effect on input?
ACheck that it is applied to an editable element (input, textarea, or a contenteditable element) — plain non-editable text has no caret. Also, in forced appearance modes like high-contrast system themes, the browser may override custom colors. All major browsers (Chrome, Firefox, Safari, Edge) support it, but older Safari versions have partial support for some syntax.
QCan the caret-color property be applied to contenteditable elements?
AYes. contenteditable elements have a text caret just like input and textarea, so caret-color works there too — you can give rich-text editors and editable headings a unified caret color that fits your design system. It is an inherited property: set it on the parent container and children inherit the color.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
