caret-color
Sets the color of the text cursor (caret) in inputs, textareas, or any editable element. This is a great way to maintain brand colors even in form fields.
It is documented as part of the CSS Basic User Interface specification.
Syntax
/* Usage Example */
input {
/* Changes the blinking cursor color */
caret-color: #7c3aed;
}
/* Syntax */
caret-color: auto;
/* Global values */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: revert-layer;
caret-color: unset;caret-color Browser support
Widely available
Since
2020 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
57+
53+
11.1+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more