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:
![](gif/caret-bar18ee.gif)
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:
![](gif/caret-underscore0f8c.gif)
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.