Appearance

Caret Color

Style syntax for setting the color of the cursor in text input.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
caret-color:color / caret:colorcaret-color: color
caret:currentcaret-color: currentColor
caret:transparentcaret-color: transparent
caret:#hexcaret-color: #hex
caret:rgb(rgb)caret-color: rgb(rgb)
caret:hsl(hsl)caret-color: hsl(hsl)

Basic usage

Set the cursor color

Use the caret-color:color to change the cursor color in text input.

Focus on input to see the cursor color

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

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="caret-color:blue-46:hover caret-color:blue-46@sm caret-color:blue-46@dark caret-color:blue-46@print"></div>
PREVIOUS
Appearance

Style syntax for controlling the native appearance of UI controls.

NEXT
Color

Style syntax for setting foreground color of an element.

MIT License © Aoyue Design LLC.