CSS caret-color Property

The caret is the blinking indicator in input elements.

The caret-color property sets the color of the caret.

Color values can be hex, rgb, hsl, rgba, hsla, or a color name.

Example

#

Click the input field to see a red blinking caret. .

<input style="caret-color: red;"
       placeholder="First name">

Using caret-color

The caret-color property sets the cursor or caret color.

If not set, it uses the caret color of the device.

This property is not supported by all browsers.

Syntax

caret-color: auto | color | transparent;

Values

#

Value Description
auto Default. Uses the current device color for the caret
color Sets a caret color.
transparent Sets the caret color to transparent.

More Examples

Click the buttons to see the different caret-color values.

caret-color: auto
<style>
  .caret-color-example {
    caret-color: auto;
  }
</style>

<div>
  <input class="caret-color-example"
         placeholder="Email">
  <div class="show-color">caret-color: auto</div>
</div>

Browser support

This table shows when caret-color support started for each browser.

Chrome
57.0 Mar 2017
Firefox
53.0 Apr 2017
IE/Edge
Not Supported
Opera
44.0 Mar 2017
Safari
11.1 Mar 2018

You may also like

Guides