CSS - caret-color

CSS caret-color property specifies the color of the insertion caret, which is the visible marker indicating where the next typed character will be placed. It is also known as the text input cursor.

The caret is found in elements such as <input> or those with contenteditable attribute. This is a thin vertical line, flashing to enhance visibility. It is black by default, but this property allows you to change it.

Possible Values

  • auto − The user agent chooses a suitable colour for the caret. The color is commonly currentcolor, but the user agent may select for a different one for better visibility, considering currentcolor, background, shadows, and other factors.

    Note: Even user agents can use the normally animatable currentcolor for the auto value, it is not interpolated during transitions and animations.

  • <color> − Color of the caret.

The insertion caret is just one type; browsers may have a navigation caret for non-editable text, while the cursor over text with the auto property or certain elements is not a caret but a cursor. The mouse cursor image appears as a caret when hovering over text with the auto property or over an element with text or vertical-text property, but it is actually a cursor, not a caret.

Applies to

All elements.

Syntax

Keyword Values

caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

<color> Values

caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

CSS caret-color - auto Value

The following example demonstrates use of property caret-color: auto. We see input field styled with a default cursor color −

<html>
<head>
<style>
   input {
      caret-color: auto;
      margin-bottom: 10px;
      padding: 5px;
   }
</style>
</head>
<body>
   <input value="Deafult cursor color." size="65" />
</body>
</html>

CSS caret-color - transparent Value

The following example demonstrates the caret-color: transparent property. Here input field is styled with a transparent cursor −

<html>
<head>
<style>
   input {
      caret-color: transparent;
      margin-bottom: 10px;
      padding: 5px;
   }
</style>
</head>
<body>
   <input value="Transparent cursor." size="65" />
</body>
</html>

CSS caret-color - currentcolor Value

The following example demonstrates the caret-color: currentcolor. This sets the color of the cursor to the text color (blue) −

<html>
<head>
<style>
   input {
      color: blue;
      border: 3px solid black;  
      padding: 5px;
      caret-color: currentColor;
   }
</style>
</head>
<body>
   <input value="Deafult cursor color." size="65" />
</body>
</html>

CSS caret-color - <color> Values

The following example demonstartes how to use caret-color property for styling of input elements with different cursor colors −

<html>
<head>
<style>
   input {
      display: block;
      margin-bottom: 10px;
      padding: 10px;
   }
   .box1 {
      caret-color: orange;
   }
   .box2 {
      caret-color: #5729e9;
   }
   .box3 {
      caret-color: rgb(241, 245, 20);
   }
   .box4 {
      caret-color: hsla(320, 77%, 58%, 0.8);   
   }
</style>
</head>
<body>
   <input class="box1" value="The cursor is orange colored." size="65" />
   <input class="box2" value="The cursor is blue colored." size="65" />
   <input class="box3" value="The cursor is yellow colored." size="65" />
   <input class="box4" value="The cursor is pink colored." size="65" />
</body>
</html>
Advertisements