MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

The caret-color CSS property sets the color of the caret in an element. The caret is a visible indicator of the point where text and other content can be inserted by the user's typing or editing.

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

Note: The insertion caret is only one type of caret. For example, many browsers have a “navigation caret,” which acts similarly to an insertion caret but can be moved around in non-editable text. On the other hand, the cursor image shown when hovering over text where the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes looks like a caret, is not a caret (it’s a cursor).

Initial valueauto
Applies toall elements
Inheritedyes
Mediainteractive
Computed valueauto is computed as specified and <color> values are computed as defined for the color property.
Animation typea color
Canonical orderper grammar

Syntax

Values

auto
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.

<color>
The color of the caret.

Formal syntax

auto | <color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Example

HTML

<input value="This field uses a default caret." />
<input class="custom" value="I have a custom caret color!" />

CSS

input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
}

input.custom {
  caret-color: red;
}

Result

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'caret-color' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57 [1]

No support [2]

53.0 (53.0) [3]

No support

44

No support [4]
system caret

[1] This feature was implemented in Chromium bug 617371.

[2] This feature is not implemented yet. See the related enhancement request.

[3] This feature was implemented in Firefox bug 1063162.

[4] This feature was implmeneted in WebKit bug 166572 and it is included in Safari Technology Preview since version 38.

Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57 57 53.0 (53.0) No support

font color

44 No support

system caret

 

Document Tags and Contributors

 Contributors to this page: rego, mfluehr, Konrud, rwilson.or, jpmedley, Melodyn, DBaron, yisibl, Sebastianz
 Last updated by: rego,