caret-color
Setting the insertion caret color in editable text.
Overview
| Class | Declarations |
|---|---|
caret-color:auto | caret-color: auto;
|
caret-color-current | caret-color: currentColor;
|
caret-color:transparent | caret-color: transparent;
|
caret-color:<color> | caret-color: <color>;
|
caret-color changes the insertion caret in an editable element. It is independent of the mouse pointer, selection highlight and focus outline.
Examples
Set the text caret color
Focus either input and edit its value. caret-color-blue requests a colored insertion caret while caret-color:auto lets the browser choose.
<!-- Automatic caret --><label class="grid gap-sm w:240px max-w:100%"> Layer name <input id="target" type="text" value="Untitled canvas" aria-describedby="caret-help" class="w:100% caret-color:auto"></label><p id="caret-help" class="mb:0 mt-sm font-xs text-muted">Type a name, then move the insertion caret with the arrow keys.</p><!-- Blue caret --><label class="grid gap-sm w:240px max-w:100%"> Layer name <input id="target" type="text" value="Untitled canvas" aria-describedby="caret-help" class="w:100% caret-color-blue"></label><p id="caret-help" class="mb:0 mt-sm font-xs text-muted">Type a name, then move the insertion caret with the arrow keys.</p>Generated CSS
@layer theme { :root, :host { --color-text-blue: var(--color-blue-60); --color-blue-60: oklch(51.83% .2687 266.1); --color-blue-30: oklch(72.87% .1468 249.3) } @media (prefers-color-scheme:light) { :root { --color-text-blue: var(--color-blue-60) } } @media (prefers-color-scheme:light) { :host { --color-text-blue: var(--color-blue-60) } } @media (prefers-color-scheme:dark) { :root { --color-text-blue: var(--color-blue-30) } } @media (prefers-color-scheme:dark) { :host { --color-text-blue: var(--color-blue-30) } }}@layer utilities { .caret-color-blue { caret-color: var(--color-text-blue) }}Caret blinking and paint are platform behavior. The readout reports the requested computed color; a still screenshot can catch the caret between blinks.
Use the current text color
Use caret-color-current to follow the input’s foreground color. The semantic text color adapts to light and dark themes.
<!-- Caret follows text --><label class="grid gap-sm w:240px max-w:100%"> Layer name <input id="target" type="text" value="Untitled canvas" aria-describedby="caret-help" class="w:100% text-blue caret-color-current"></label><p id="caret-help" class="mb:0 mt-sm font-xs text-muted">Type a name, then move the insertion caret with the arrow keys.</p>Hide the caret intentionally
caret-color:transparent hides the insertion marker while the field remains editable. This example intentionally has no replacement caret, so the loss is visible when you type.
<!-- Transparent caret --><label class="grid gap-sm w:240px max-w:100%"> Layer name <input id="target" type="text" value="Untitled canvas" aria-describedby="caret-help" class="w:100% caret-color:transparent"></label><p id="caret-help" class="mb:0 mt-sm font-xs text-muted">The caret is hidden. This is a behavior demonstration, not a complete custom editor.</p>Only hide the native caret when an editing implementation provides a usable replacement. This class does not draw one or disable keyboard input.
Apply conditionally
Use caret-color-violet:focus to change the insertion caret when the field receives real focus. The field keeps its blue text and separate focus outline.
<!-- Focus changes only the caret --><label class="grid gap-sm w:240px max-w:100%"> Layer name <input id="target" type="text" value="Untitled canvas" aria-describedby="caret-help" class="w:100% text-blue caret-color-current caret-color-violet:focus"></label><p id="caret-help" class="mb:0 mt-sm font-xs text-muted">Type a name, then move the insertion caret with the arrow keys.</p><label class="flex items-center gap-sm mt-md"> <input type="checkbox"> Lock layer after editing</label>Focus the checkbox to leave the field; focus the text input again to restore the violet caret.