Interaction
caret-color
caret-color sets the color of the caret, the blinking mark where typed text goes in a text field.
Syntax
auto | <color> [ auto | <color> ]?Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
caret-color: #e0951a;
}Controls
caret-color#e0951a
About
Values
Write a color. With the initial auto, it is usually the text color (currentcolor), and browsers may change it so it doesn't blend into the background. caret-color is inherited.
Click the text field in the preview on this page to see the caret. With transparent, you can still type, but the caret disappears.
Where it applies
It applies to input, textarea, and elements made editable with contenteditable. The shape of the mouse pointer is set with cursor instead.
The second value
The spec allows a second value, the color of the text under a block caret (caret-shape: block). No browser supports the second value yet, so the controls on this page don't offer it.