CSS caret-color property specifies the color of the cursor for input elements such as <input>, <textarea>, etc.
See the <input> element below. It has a red color cursor.
The color value can be specified in any valid CSS color format like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. Try out the example below to check how it works:
Example:
.input1{
caret-color: red;
}
.input2{
caret-color: blue;
}
It is also possible to set a transparent caret. Try out the below example:
Example:
input{
caret-color: transparent;
}
CSS Syntax
The caret-color property has the following syntax:
caret-color: auto | color| transparent | initial | inherit;
Property Values
The caret-color property accepts the following values:
| auto | Default value. Browser sets the current color of the element to the cursor. |
| color | Specifies the color of the cursor. The color value can be specified in any valid CSS color format like ‘color name’, ‘HEX’, ‘RGBA’, ‘HSLA’, etc. |
| transparent | Specifies a transparent cursor. |
| initial | Sets the caret-color property to its default value. Which is auto. |
| inherit | Inherits the caret-color value from its parent element. |
General Info
| Default Value | auto |
| Inherited | Yes |
| JavaScript Usage | element.style.caretColor = “red” |
