CSS caret-color Property

CSS caret-color property specifies the color of 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:

autoDefault value. Browser sets the current color of the element to the cursor.
colorSpecifies the color of the cursor. The color value can be specified in any valid CSS color format like ‘color name’, ‘HEX’, ‘RGBA’, ‘HSLA’, etc.
transparentSpecifies a transparent cursor.
initialSets the caret-color property to its default value. Which is auto.
inheritInherits the caret-color value from its parent element.

General Info

Default Valueauto
InheritedYes
JavaScript Usageelement.style.caretColor = “red”