CSS caret-color Property

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:

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”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment