caret-color

Summary

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 is inserted by the user's typing or editing.

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, and is functionally a caret. 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).

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

/* Keyword value */
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);

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 for the auto value, in opposite to the currentcolor value, auto is not interpolated on transitions/animations.
<color>
Use the specified color as the caret color.

Formal syntax

auto | <color>

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

where
<rgb()> = rgb( <rgb-component>#{3} , <alpha-value>? )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> , <alpha-value>? )
<hsla()> = hsla( <hue>, <percentage>, <percentage> , <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

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

Example

HTML content

<input id="example" />

CSS content

#example {
  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.0 No support 53.0 (53.0) No support No support ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 53.0 (53.0) No support No support ?

Document Tags and Contributors

 Contributors to this page: DBaron, yisibl, Sebastianz
 Last updated by: DBaron,