CSS caret-color Property

Description

The caret-color property sets the color of the text cursor (caret). The caret symbol is a visible indicator of the insertion point in the element at which the user inserts text (and possibly other content). The caret is seen in elements such as <input>, <textarea> and elements that use the contenteditable attribute.

Initial value
auto
Applies to
All elements
Inherited
Yes
Media
Interactive
Computed value
auto is computed as specified and <color> values are computed as defined for the color property.
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.caretColor

Syntax

caret-color: auto | <color>

Values

  • autoBrowsers use currentColor . Browsers can also automatically adjust the color of the carriage to provide good visibility and contrast with the surrounding content, based on currentColor , background, shadows, etc.
  • <color>The color of the caret.

Example

<input value="This field uses a default caret." size="64">
<input class="custom" value="I have a custom caret color!" size="64">
<p contenteditable class="custom">This paragraph can be edited, and its caret has a custom color as well!</p>
input {
   caret-color: auto;
   display: block;
   margin-bottom: .5em;
}
input.custom {
   caret-color: green;
}
p.custom {
  caret-color: red;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX57534411.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757534311.17.0