caret

caret in CSS is a shorthand property that combines the caret-color and caret-shape properties into a single declaration. So, we get to write this:

.element {
  caret: #ff7a18 underscore;
}

…which is akin to writing this:

.element {
  caret-color: #ff7a18;
  caret-shape: underscore;
}

That’s a nice shortcut when you want to change the color and shape of a caret. And what’s a caret, you ask? You’re probably most familiar seeing one when typing into an editable element, such as a text input or textarea. I’m typing this post in WordPress, which is basically one giant form field, and this is the caret I see blinking at me:

So, by setting the caret-color to, say, #ff7a18, and the caret-shape to something like underscore, we might expect to see something like this:

Syntax

caret: <'caret-color'> || <'caret-shape'>

The syntax can take one value or another… or both! If a value is blank, then its initial value is used, which is auto for both constituent properties.

• Initial: auto
• Applies to: elements that accept input
• Inherited: yes
• Percentages: n/a
• Computed value: see individual properties
• Animation type: not animatable

Values

caret: #ff7a18 underscore;
caret: yellow block;
caret: hsla(50, 100%, 50%, 0.75) bar;

/* Keyword color values */
caret: auto;
caret: transparent block;
caret: currentcolor underscore;

/* Global values */
caret: inherit;
caret: initial;
caret: unset;

Browser support

None at the moment. The property is initially defined in the CSS Basic User Interface Module Level 4 specification, which is currently in Editor’s Draft. That means there’s still room for changes to be made between now and when it becomes a recommendation for browsers to implement.

In the meantime, we can sorta “fake” the caret property with some other CSS magic.

Related properties