CSS - caret-color Property

CSScaret-colorproperty specifies the color of the cursor, which is the visible marker, also known as the text input cursor. It is used with input elements such as input forms, text boxes, textarea etc. which use the cursor and are editable.

Syntax

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

Property Values

ValueDescriptionautoThe browser uses the currentColor for the caret. Default.colorThe color of the caret can be specified in different formats (color names, hex, rgb etc.).transparentThe caret is not visible.initialIt sets the property to its default value.inheritIt inherits the property from the parent element.

Examples of CSS Caret Color Property

The following examples explain thecaret-colorproperty with different values.

Caret Color Property with Auto Value

To let the browser decide the color of the cursor, which uses the current text color, we use theautovalue. The current text color will be applied to the cursor. This is shown in the following example.

Example

Caret Color Property with Color Values

To give a color of our choice to the cursor, we can specify the color in different format (color names, hex values, rgb values, hsl values etc.). The specified color will be applied to the cursor. This is shown in the following example.

Example

Caret Color Property with Transparent Value

To make the cursor transparent such that it is not visible, we use thetransparentvalue. This is shown in the following example.

Example

Supported Browsers

css_reference.htm