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
X	79	57	53	44	11.1
Tablets / Mobile
57	57	53	43	11.3	7.0

Last updated by CSSPortal on: 15th April 2022