CSS caret-color 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 flash. By default, this caret is black. However, the caret-color property allows applying any color to the caret.

Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.caretColor = "#1c87c9";

Syntax

caret-color: auto | color;

Example of the caret-color property:

<!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>

Faking the caret-color property

There exists a method of faking it by making the text transparent with the help of the -webkit-text-fill-color property and using the text-shadow property make the text to show back up, coloured.

Values

Value Description
auto Sets the current color of the text. This is the default value.
color Specifies a color for the caret.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

57.0+ x 53.0+ 11.1+ 44.0+


Do you find this helpful?

Related articles