Examples of CSS caret-color

DanielJanuary 3, 2023February 1, 2023

The caret-color property is used in CSS to set the color for the blinking cursor we see in HTML text inputs or text areas.

The basic syntax for caret-color is:

input {
    caret-color: <<valueHere>>;
}

Css caret-color examples

For example, if we say:

input {
    caret-color: rgb(255, 0, 0);
}

We will get the below output:

We can also use HSL colors for the caret:

input {
    caret-color: hsl(0, 50%, 50%);
}

Or any other color syntax such as named colors:

input {
    caret-color: red;
}

What is the auto value for caret-color?

The default value for the caret-color property is auto:

input {
    caret-color: auto|<<other_color>>;
}

Setting the caret-color to auto means that it will use the CSS currentColor as the first option. Keep in mind that the user agent can override this and set a different color to ensure good visibility and contrast.

Example of hiding the cursor with caret-color

And speaking of color values, we can completely hide the cursor by setting its color to transparent:

input {
  caret-color: transparent;
}

Keep in mind that hiding the cursor for an input is a very bad practice for accessibility and you should have serious reasons for doing it.

To what elements can I apply caret-color?

We can apply the caret-color property to any of the following HTML elements:

• inputs of types such as text, password, email, number
• text areas
• and also elements with a contenteditable attribute set to true

How about other properties such as CSS caret-width or caret-type?

For the time being, it seems that the caret-color property is the only one we can use in order to customize the look and feel of the cursor.

However, we can simulate things such as caret-width or caret-type as this CSS tricks example shows.

The caret-color comes as a great companion to the accent-color property for an easy way to set the look and feel of the form elements.