What is the CSS caret-color property?

What is caret-color?

The caret-color property in CSSCascade Style Sheets defines the color of the caret (cursor) in the text areas or input areas.

Syntax

caret-color: auto|color|initial|inherit;

Property values

• auto: It is the default value. It allows the use of the current color of the browser.

• color: It specifies the cursor’s color or caret.

• initial: This sets the value to its default value.

• inherit: This is used to inherit property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the caret-color property.

Explanation

In this example, we set the cursor or caret color to red. So, when we click on Enter Name, we can see that the cursor color has been changed to red.

We can also change the color of the caret.