We use cookies to improve your experience. Learn more in our Privacy policy.
caret-color
The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as or those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.
Example
| Initial value | auto |
| Applies to | all elements |
Syntax
caret-color: red;
Values
The user agent selects an appropriate color for the caret. This is generally currentcolor, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of currentcolor, the background, shadows, and other factors.
Note: While user agents may use currentcolor (which is usually animatable) for the auto value, auto is not interpolated in transitions and animations.
The color of the caret.
Browser support
| caret-color | 57 | 79 | 53 | 44 | 11.1 |