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.
