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 property specifies the color of the insertion caret (cursor). It is a thin vertical line, which is easily noticeable due to its blinking. By default, this caret is black. However, the caret-color property allows applying any color to the caret.

Initial Valueauto
Applies toElements that accept text input.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.caretColor = "#1c87c9";

Syntax

Syntax of CSS caret-color Property

caret-color: auto | color;

Example of the caret-color property:

Example of CSS caret-color Property with transparent and color value

<!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
autoSets the current color of the text. This is the default value.
colorSpecifies a color for the caret.
initialIt makes the property use its default value.
inheritIt inherits the property from its parent element.

Practice

Practice

What is the function of the CSS caret-color property?