caret-color

Setting the color of the cursor in text input.

Overview

Examples

Set the text caret color

Use caret-color:* to change the insertion caret color in inputs and editable text.

Focus on input to see the cursor color

<input type="text" class="caret-color:pink-70">

@layer theme {    :root {        --color-pink-70: oklch(58.95% .2377 2.6)    }}@layer utilities {    .caret-color\:pink-70 {        caret-color: var(--color-pink-70)    }}

Use the current text color

Use caret-color:current when the caret should follow the foreground color.

<input class="fg:blue-60 caret-color:current" value="Editable value">

Hide the caret intentionally

Use caret-color:transparent only for custom editing surfaces that draw their own caret.

<div contenteditable="true" class="caret-color:transparent">    Custom editor</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<input class="caret-color:blue-60:focus caret-color:current@sm caret-color:current@print">