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);

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

Browser compatibility