Caret Color
Use or name colors please refer to Colors.
Overview
The caret-color CSS property sets the caret color for the insertion caret, the visible marker where the next character typed will be inserted.
This is sometimes referred to as the text input cursor. The caret appears in elements such as <input> or those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.
<input class="" type="text"><div>
<input id="demoInput" type="text"
class="p:5|10 b:1px|solid|gray-44 r:3 w:300 caret-color:auto ~caret-color|.3s"
value="Focus on input to see the caret color"/>
</div>Applying with functions
<div class="caret-color:$(value)">...</div>Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.
You can also use calc(expression), env(expression) and other CSS functions if the property supports it.
To learn more, see the Functions documentation.
Conditionally apply
States and selectors
<div class="caret-color:blue-60:hover">...</div>Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.
To learn more, see the Selectors documentation.
Responsive breakpoints
<div class="caret-color:blue-60@sm">...</div>Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.
To learn more, see the Breakpoints documentation.
Print format and media queries
<div class="caret-color:blue-60@print">...</div>Master supports media types like print, screen, speech, all, and other media queries.
To learn more, see the Media Queries documentation.
Dark mode and color schemes
<div class="caret-color:blue-60@dark">...</div>Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.
To learn more, see the Color Schemes documentation.
