caret-shape CSS property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The caret-shape CSS property sets the shape of the insertion caret, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.
Try it
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;
<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;
}
Syntax
/* Keyword values */
caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;
/* Global values */
caret-shape: inherit;
caret-shape: initial;
caret-shape: revert;
caret-shape: revert-layer;
caret-shape: unset;
Values
auto-
The default value. The browser determines the caret shape. This typically follows platform conventions and may change based on context.
bar-
The caret appears as a thin vertical line at the insertion point, positioned between characters rather than over them.
block-
The caret appears as a rectangle that overlaps the next character after the insertion point. If no character follows, it appears after the last character.
underscore-
The caret appears as a thin horizontal line underneath the next character after the insertion point. If no character follows, it appears after the last character.
Description
The insertion caret is the blinking cursor that indicates where text will be inserted when typing. Different caret shapes can provide visual feedback about the current editing mode or offer visual customization.
Editing modes and caret shapes
Text editors typically operate in one of two modes:
- Insert mode: New characters are inserted at the caret position, pushing existing text to the end of the line. This is the default behavior in most modern applications.
- Overtype mode (also called "overwrite mode"): New characters replace existing characters at the caret position instead of being inserted between them. This mode is often toggled with the Insert key.
Different caret shapes have traditional uses, for example:
- Bar carets are positioned between characters and are most common in modern interfaces.
- Block carets overlay the next character and are often used in terminal applications or to indicate overtype mode.
- Underscore carets appear below characters and can be useful for certain design aesthetics, such as mimicking typewriter or underline text input styles.
Caret positioning and behavior
The caret-shape property affects how the caret is visually rendered but doesn't change its logical position in the text. The caret always represents the insertion point between characters, regardless of its visual shape.
Interaction with writing modes
The caret shape adapts to the writing-mode of the text. In vertical writing modes, bar carets become horizontal, and underscore carets position themselves appropriately relative to the text direction.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | Text or elements that accept text input |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |
Formal syntax
caret-shape =
auto |
bar |
block |
underscore
Examples
Retro terminal with animated caret
This example shows how to create a vintage terminal interface using caret-shape: block with animated caret color, replacing the old technique of using borders.
The key part is using the modern caret properties instead of the old border-based technique. We set the caret to block shape, disable the default blinking, and create our own custom animation.
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-shape: block;
caret-animation: manual;
animation: old-caret 2s infinite;
}
@keyframes old-caret {
0%,
50% {
caret-color: #00ad00;
}
75%,
100% {
caret-color: transparent;
}
}
Result
Console interface with underscore caret
This example demonstrates using caret-shape: underscore to create a console-style interface where the underscore caret complements the terminal aesthetic.
HTML
<label for="console">Enter a command</label>
<div class="console-demo">
<div class="console-output">
<p>user@host:css-ui-4 $ ls -a</p>
<p>. .. Overview.bs Overview.html</p>
</div>
<div class="console-input">
<span class="prompt">user@host:css-ui-4 $ </span>
<input type="text" id="console" class="console" value="cd" />
</div>
</div>
CSS
.console {
caret-shape: underscore;
}
Result
Specifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # propdef-caret-shape |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
caret-shape
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
bar
|
|
|
|
|
|
|
|
|
|
|
|
|
block
|
|
|
|
|
|
|
|
|
|
|
|
|
underscore
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
See also
caret-color,caret-animationcaretshorthand- CSS basic user interface module