caret
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The caret shorthand CSS property sets the appearance and behavior of the insertion caret in a single declaration.
Try it
caret: red;
caret: block manual;
caret: underscore auto green;
caret: bar manual orange;
<section class="default-example container" id="default-example">
<div>
<label for="example-element">Edit text field:</label>
<input id="example-element" type="text" value="Sample text" />
</div>
</section>
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Individual values */
caret: red; /* caret-color only */
caret: block; /* caret-shape only */
caret: manual; /* caret-animation only */
/* Two values */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* Three values */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* Global values */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
The caret property is specified as one, two, or three values from the constituent properties. Values can be specified in any order, and omitted values are set to their initial values.
Values
caret-color-
Sets the color of the caret.
caret-animation-
Controls whether the caret blinks.
caret-shape-
Sets the visual shape of the caret.
Description
The caret shorthand allows you to set multiple caret properties in a single declaration, making it convenient to customize the complete appearance and behavior of the insertion caret.
Value resolution
When values are omitted from the shorthand, they reset to their initial values:
caret-color:auto(resolves tocurrentColor).caret-animation:auto(caret blinks).caret-shape:auto(browser-determined shape).
Order independence
Unlike some CSS shorthands, the caret property accepts values in any order. The browser determines which value applies to which property based on the value type:
<color>values apply tocaret-color.auto/manualkeywords apply tocaret-animation.- Shape keywords (
bar,block,underscore) apply tocaret-shape.
Formal definition
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | elementsThatAcceptInput |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Formal syntax
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
Examples
Retro terminal with animated caret
This example creates a vintage terminal interface using the caret shorthand to combine multiple caret properties, demonstrating how it replaces older border-based techniques.
The main advantage of the caret shorthand is combining multiple properties in one declaration. Here we set the shape to block, disable default blinking, and set the color to green, all in a single line.
HTML
<label for="terminal">Enter a command</label>
<div class="old-screen">
<span>></span>
<textarea id="terminal" class="terminal-input"></textarea>
</div>
CSS
.terminal-input {
caret: block manual green;
animation: vintage-caret 2s infinite;
}
@keyframes vintage-caret {
from,
50% {
caret-color: green;
}
75%,
to {
caret-color: transparent;
}
}
Result
Specifications
Browser compatibility
Loading…