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.

Class	Declarations
`caret-color:color` `/` `caret:color`	`caret-color: color`
`caret:current`	`caret-color: currentColor`
`caret:transparent`	`caret-color: transparent`
`caret:#hex`	`caret-color: #hex`
`caret:rgb(rgb)`	`caret-color: rgb(rgb)`
`caret:hsl(hsl)`	`caret-color: hsl(hsl)`

Basic usage

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">

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>