Caret Color

Utility	Properties
Error: 429

This example showcases default and custom caret color utilities. The custom caret-color will have an indigo color from the default color palette.

Try writing a sentence to see the caret color. ```html live "cc-indigo"

Default

Custom

<Note icon="cursor_text">Try writing a sentence to see the caret color.</Note>

```html live "cc-indigo"
<div class="d-g g-16 gtc-1 sm:gtc-2">
  <div class="d-g">
    <label class="fw-600">Default</label>
    <input class="b-1 bc-silver p-1 rad-1" placeholder="Type something..." />
  </div>

  <div class="d-g">
    <label class="fw-600">Custom</label>
    <input class="b-1 bc-silver cc-indigo p-1 rad-1 " placeholder="Type something..." />
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="cc-lead h:cc-indigo ..."></div>