This is an important message requiring you to make a choice if you're based in the EU.

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";


caret-color: auto | color;


<!DOCTYPE html>
    <title>Title of the document</title>
      .caret-example1 {
      caret-color: transparent;
      .caret-example2 {
      caret-color: #1c87c9 ;
    <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">


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