1. Web
  2. CSS
  3. caret-shape

caret-shape

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

css
/* 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 valueauto
Applies toelementsThatAcceptInput
Inheritedyes
Computed valueas specified
Animation typeby 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

html
<label for="terminal">Enter a command</label>
<div class="old-screen">
  <span>></span>
  <textarea id="terminal" class="terminal-input"></textarea>
</div>

CSS

css
.terminal-input {
  caret-shape: block;
  caret-animation: manual;
  animation: old-caret 2s infinite;
}

@keyframes old-caret {
  from,
  50% {
    caret-color: green;
  }
  75%,
  to {
    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

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

css
.console {
  caret-shape: underscore;
}

Result

Specifications

This feature does not appear to be defined in any specification.

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content