<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> currentcolor<span class="token punctuation">;</span> <span class="token comment">/ &lt;color&gt; values /</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> #5729e9<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 200<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>228<span class="token punctuation">,</span> 4%<span class="token punctuation">,</span> 24%<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">caret-color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

caret-color

The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as <input> or those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.

Note that 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 mouse 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).

Syntax

/* 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);  /* Global values */ caret-color: inherit; caret-color: initial; caret-color: revert; caret-color: unset; 

Values

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.

The color of the caret.

Formal definition

Formal syntax

auto | <color>
where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

Setting a custom caret color

<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: red; }  p.custom {   caret-color: green; } 

Specifications

See also