W3docs
en
Log in

CSS caret-color Property

The carter-color is a CSS property which specifies the color of the cursor. Find an example with this property.

The caret-color CSS property sets the color of the insertion caret — the thin, blinking vertical line that marks where typed text will appear inside a text field or any editable element. By default the caret matches the user agent's text color (usually black). With caret-color you can recolor it to match your brand, improve contrast against a colored input background, or hide it entirely.

The caret is purely a typing indicator. It is not the same as the mouse cursor (controlled by the cursor property) and it does not affect the selection highlight color.

This page covers what caret-color does, where it applies, its accepted values, and the gotchas worth knowing before you ship it.

Initial Valueauto
Applies toElements that accept text input.
InheritedYes.
AnimatableYes (as a color).
VersionCSS3
DOM Syntaxobject.style.caretColor = "#1c87c9";

Where caret-color applies

The caret appears wherever the user can type or position a text-editing cursor, so caret-color affects:

  • <input> fields that accept text (text, search, email, url, password, tel, number).
  • <textarea> elements.
  • Any element with the contenteditable attribute set to true.

Because the property is inherited, you can set it once on a container (or on the :root) and every editable descendant picks it up — handy for theming an entire form with a single rule.

Syntax

caret-color: auto | <color>;

Example: transparent vs. custom caret

The first input keeps the default caret, the second hides its caret with transparent, and the third uses a custom blue:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .caret-example1 {
        caret-color: transparent;
      }
      .caret-example2 {
        caret-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Caret-color property example</h2>
    <input value="Default caret color" />
    <br />
    <br />
    <input class="caret-example1" value="Transparent caret color" />
    <br />
    <br />
    <input class="caret-example2" value="Custom caret color" />
  </body>
</html>
Try it Yourself »

Values

ValueDescription
autoThe browser chooses an appropriate color, typically currentColor (the element's text color). This is the default.
<color>Any valid CSS color: a named color, hex (#1c87c9), rgb()/rgba(), or hsl()/hsla(). Use transparent to hide the caret.
initialResets the property to its default value (auto).
inheritTakes the computed value from the parent element.

Any color format works, so the following declarations are all valid:

caret-color: red;            /* named color   */
caret-color: #1c87c9;        /* hex           */
caret-color: rgb(28 135 201);/* rgb           */
caret-color: hsl(202 76% 45%);/* hsl          */
caret-color: transparent;    /* invisible caret */

See CSS color names for the full list of keywords, and the color property for how currentColor is resolved.

Gotchas and tips

  • auto resolves to currentColor. If you only change the text color, the caret follows it automatically — you often do not need caret-color at all unless you want the caret to differ from the text.
  • transparent hides the caret without disabling editing. The field still accepts input; only the blinking indicator disappears. Avoid this on real forms — an invisible caret hurts usability and accessibility.
  • No effect on non-editable elements. Setting caret-color on a <div> without contenteditable, or on a disabled/readonly input, does nothing because no caret is drawn there.
  • Mind the contrast. A caret that blends into a dark input background can be hard to find. Pick a color that stands out, just as you would for text contrast.
  • It is animatable. Because the value is a color, you can transition it — for example, fading the caret to a highlight color when an input gains focus.
input {
  caret-color: #999;
  transition: caret-color 0.2s ease;
}
input:focus {
  caret-color: #1c87c9;
}

Browser support

caret-color is supported in all modern browsers (Chrome, Edge, Firefox, Safari, and Opera). It degrades gracefully: browsers that do not recognize it simply show the default caret, so there is no harm in using it without a fallback.

  • color — text color, and the source of currentColor that caret-color: auto falls back to.
  • outline-color — color of the focus outline often shown alongside an active input.
  • opacity — fade an element, including its caret.

Practice

Practice
What is the function of the CSS caret-color property?
What is the function of the CSS caret-color property?
Was this page helpful?