caret
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
ThecaretshorthandCSS property sets the appearance and behavior of theinsertion caret in a single declaration.
Try it
caret: red;caret: block manual;caret: underscore auto green;caret: bar manual orange;<section> <div> <label for="example-element">Edit text field:</label> <input 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;Thecaret 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-colorSets the color of the caret.
caret-animationControls whether the caret blinks.
caret-shapeSets the visual shape of the caret.
Description
Thecaret 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, thecaret 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 thecaret shorthand to combine multiple caret properties, demonstrating how it replaces older border-based techniques.
The main advantage of thecaret shorthand is combining multiple properties in one declaration. Here we set the shape toblock, disable default blinking, and set the color togreen, all in a single line.
HTML
<label for="terminal">Enter a command</label><div> <span>></span> <textarea></textarea></div>CSS
label { background: #092104; display: block; padding: 10px 20px; color: #00ad00; font-weight: bold; font-family: monospace;}.old-screen { background: repeating-linear-gradient( #092104, #092104 2px, #123208 2px, #123208 4px ); height: 140px; display: flex; align-items: flex-start; padding: 20px; font-family: monospace;}span { display: inline-block; padding: 2px 5px; color: #00ad00; font-weight: bold; margin-right: 8px;}.terminal-input { background: transparent; height: 100%; border: none; color: #00ad00; font-family: inherit; font-size: 1rem; outline: none; flex: 1; resize: none;}.terminal-input { caret: block manual green; animation: vintage-caret 2s infinite;}@keyframes vintage-caret { 0%, 50% { caret-color: #00ad00; } 75%, 100% { caret-color: transparent; }}Result
Specifications
Browser compatibility
Loading…