CSS caret-color Property

The caret-color property specifies the color of the insertion caret (cursor). It is a thin vertical line which by default, is black. This property allows to apply 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

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

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 x 53.0+ 11.1+ 44.0+




Related articles