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.
Quick example
input {
/* Changes the blinking cursor color */
caret-color: #7c3aed;
}Quick facts
Initial value
autoInherited
Yes
Applies to
text or elements that accept input
Animation type
color
Values
auto 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.
Safe to use without fallbacks.
57+
53+
11.1+
79+