CSS caret-color Property

Description

The caret-color CSS property allows you to specify the color of the text cursor (caret) in an HTML input or textarea element. This property is useful for customizing the appearance of the cursor when a user clicks inside a text input field. By setting the caret-color, you can change the default color of the blinking text cursor to match your website's design, making it more visually cohesive with the overall styling of your web page. It is particularly handy when you want to create a unique and consistent user interface for your web forms.

Initial value

auto

Applies to

All elements

Inherited

Yes

Computed value

auto is computed as specified and <color> values are computed as defined for the color property.

Animatable

Yes

JavaScript syntax

object.style.caretColor

Interactive Demo

caret-color: blue;

caret-color: #F0150F;

caret-color: auto;

caret-color: transparent;

Syntax

caret-color: auto | <color>

Values

• autoBrowsers use currentColor . Browsers can also automatically adjust the color of the carriage to provide good visibility and contrast with the surrounding content, based on currentColor , background, shadows, etc.
• <color>The color of the caret.

Example

<input value="This field uses a default caret." size="64">

<input class="custom" value="I have a custom caret color!" size="64">

<p contenteditable class="custom">This paragraph can be edited, and its caret has a custom color as well!</p>

input {
   caret-color: auto;
   display: block;
   margin-bottom: .5em;
}
input.custom {
   caret-color: green;
}
p.custom {
  caret-color: red;
}

Browser Support

The following table will show you the current browser support for the CSS caret-color property.

Desktop
79	57	53	44	11.1

Tablets / Mobile
57	53	43	11.3	7	57

Last updated by CSSPortal on: 1st January 2024