The caret-color property sets the color of the insertion caret — the blinking marker that shows where the next character will be typed or deleted.
It applies to focused editable text: text-like <input> types, <textarea>, and contenteditable elements. It is inherited. The initial value is auto, which usually matches the text color (currentColor).
caret-color is only the text insertion caret. The mouse pointer is controlled by cursor.
caret-color: auto | <color> | initial | inherit;Any valid CSS color works: named colors, hex, rgb(), hsl(), transparent, or currentColor.
| Value | Description | Try it |
|---|---|---|
auto | Default. Usually the current text color | Try it |
<color> | Any color, such as red, #2563eb, or rgb(0 200 0) | Try it |
transparent | Hides the caret (use carefully) | Try it |
currentColor | Matches the element’s color value | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s caret-color | Try it |
caret-colorPick an editable field, then set a caret color that stays visible against the background.
input, textarea, or contenteditable).auto for the default, or any <color> for a custom caret.| Piece | Required? | Role |
|---|---|---|
| Editable element | Yes | Text input, textarea, or contenteditable |
| Focus | Yes (to see it) | The caret appears only while the field is focused |
caret-color value | Yes | auto or any CSS color |
Focus the field and switch colors. The blinking caret updates live.
Each snippet focuses on caret-color. Focus the field in the editor to see the caret. Use Try It Yourself for a live editor.
Give a text input a red insertion caret.
<style>
input {
caret-color: red;
}
</style>
<input type="text" value="Focus me">caret-color: red paints the insertion caret red.Let the browser match the caret to the text color.
<style>
input {
color: #0f766e;
caret-color: auto;
}
</style>
<input type="text" value="Auto caret">color styles the characters you type.caret-color: auto usually follows that text color.auto.The same property works on multi-line fields.
<style>
textarea {
caret-color: #2563eb;
}
</style>
<textarea rows="3">Focus me</textarea>#2563eb makes a blue caret.caret-color too.If you do not see a caret, one of these is usually why.
The insertion caret only appears while the editable field is focused. Click or tab into the control.
cursorcursor styles the mouse pointer. caret-color styles the text insertion caret only.
Text, email, search, tel, and password show a caret. Checkbox, radio, color, and date inputs generally do not.
transparent can hurt usabilityHiding the caret makes typing harder. Keep enough contrast against the field background.
auto is discreteTransitions from auto to a color do not interpolate smoothly; the change snaps at the midpoint.
caret-color is a browser UI property for editable text. Node.js, Deno, and Bun do not apply it.
Chrome 57+, Firefox 53+, Safari 11.1+, Edge 79+, Opera 44+. Widely available since January 2020.
Bottom line: Safe for modern browsers. Pair with a visible text color and enough contrast so the caret stays easy to find.
auto and any CSS <color>.auto. Inherited. Needs focus to appear.cursor, not caret-color.One line: caret-color paints the blinking insertion caret — focus the field to see it.
Learn how to clear floats so content starts below floated elements.
8 people found this page helpful