caret-color
===========

The **`caret-color`** CSS property sets the color of the **insertion caret**, the visible marker where the next character typed will be inserted. This is sometimes referred to as the **text input cursor**. The caret appears in elements such as `<input>` or those with the `contenteditable` attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.

Try it
------

Note that the insertion caret is only one type of caret. For example, many browsers have a "navigation caret," which acts similarly to an insertion caret but can be moved around in non-editable text. On the other hand, the mouse cursor image shown when hovering over text where the `cursor` property is `auto`, or when hovering over an element where the `cursor` property is `text` or `vertical-text`, though it sometimes looks like a caret, is not a caret (it's a cursor).

Syntax
------


```css
/\* Keyword values \*/
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/\* <color> values \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

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

### Values

`auto`

The user agent selects an appropriate color for the caret. This is generally `currentcolor`, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of `currentcolor`, the background, shadows, and other factors.

**Note:** While user agents may use `currentcolor` (which is usually animatable) for the `auto` value, `auto` is not interpolated in transitions and animations.

`<color>`

The color of the caret.

Formal definition
-----------------

|  |  |
| --- | --- |
| 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. |
| Animation type | a color |

Formal syntax
-------------
```

caret-color =   
  auto     |  
  <color>    
  
```

Examples
--------

### Setting a custom caret color

#### HTML


```html
<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>
```


#### CSS


```css
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # caret-color |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `<input>` element
* The HTML `contenteditable` attribute, which can be used to make any element's text editable
* Applying color to HTML elements using CSS
* The `<color>` data type
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`