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

chrome edge firefox safari opera
57.0+ 53.0+ 11.1+ 44.0+

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?