caret-color

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

/* Keyword values */
caret-color: auto;
color: transparent;
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: User agents might have additional things that count as “carets.” For example, there can be 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 when the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes resembles a caret, is not a caret (it’s a cursor). In some browsers that do not support this property, the caret color is not associated with the font color.

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
User agents should use currentcolor but may automatically adjust the color of the caret to ensure good visibility and contrast with the surrounding content, possibly based on currentcolor, the background, shadows, etc.

Note: While user agents may use currentcolor (which is usually animatable) for the auto value, auto is not interpolated on transitions/animations.

<color>
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 />

CSS

input {
  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

Edge 38.1

53.0 (53.0)

Internet Explorer 11 

44

No support 

system caret

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: mfluehr, rwilson.or, jpmedley, Melodyn, DBaron, yisibl, Sebastianz
 Last updated by: mfluehr,