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.
Click the input field to see a red blinking caret. .
<input style="caret-color: red;"
placeholder="First name">
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.
caret-color: auto | color | transparent;
| Value | Description |
|---|---|
| auto | Default. Uses the current device color for the caret |
| color | Sets a caret color. |
| transparent | Sets the caret color to transparent. |
Click the buttons to see the different caret-color values.
<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>
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 |
