Definition and Usage

The caret-color property in CSS specifies the color of the text caret (input cursor) displayed during text input.

It changes the color of the cursor in inputs, textareas, or any editable element, such as:

CSS 
input,
textarea,
[contenteditable] {
    caret-color: red;
}

Basic Example

CSS Live Demo: caret-color Click the demo button below!

The caret-color property can only specify the color of the text input cursor, and it does not control the thickness, shape, blinking rate, or other aspects.

Formal definition

Formal definition of the caret-color Property
Initial value auto
Applies to text or elements that accept text input
Inherited no

Formal syntax

CSS 
selector {
    caret-color: auto | <color>;
}
  • auto: The browser automatically selects the caret color, typically based on the element's text color and background to ensure visibility.
  • <color>: Specifies an explicit color value for the caret. This can be any valid CSS color format, such as named colors (blue), hex codes (#00a0e9), RGB, HSL, or other CSS color notations.

Syntax

CSS 
/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor; /* The current text color of the element */

/* Color values */
caret-color: red;
caret-color: #00a0e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 6% 24% / 0.89);

/* Global values */
caret-color: inherit;
caret-color: initial;
caret-color: unset;
caret-color: revert;
caret-color: revert-layer;

Example

HTML 
<input type="text" id="custom-caret-input" placeholder="Type something...">
CSS 
/* Input field styling */
#custom-caret-input {
    font-size: 16px;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 5px;
    caret-color: red; /* Set the caret (cursor) color */
}
Live Example Preview To see the caret color, type text into the input box.
The caret color is red.

Browser compatibility

Browser compatibility for the caret-color property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
caret-color 57 79 53 11.1

Specifications

Specification for the caret-color property
Specification
caret-color CSS Basic User Interface Module Level 4
#caret-color

References

See also