CSS caret-shape for Terminal-Style Inputs

The CSS caret-shape property allows developers to change the visual appearance of the text insertion cursor in editable elements from a traditional vertical bar to a block or underscore. In terminal-style web interfaces, this property provides a native, performant way to replicate the iconic look of classic command-line prompts without relying on complex JavaScript hacks or custom overlays. This article explains how caret-shape works, the values it supports, and how to use it to style authentic terminal inputs.

The Purpose of caret-shape

In web browsers, the default text cursor inside <input>, <textarea>, or elements with contenteditable is a thin vertical line known as a bar. Traditional command-line interfaces (CLIs) and terminal emulators, however, almost universally employ either a solid block cursor or an underscore cursor.

Historically, recreating this retro CLI aesthetic on the web required hiding the native caret using caret-color: transparent; and synchronizing a custom <span> or <div> with the user's current cursor position using JavaScript. The CSS caret-shape property, defined in the CSS Basic User Interface Module Level 4, eliminates this complexity by providing direct control over the native caret geometry.

Supported Values

The caret-shape property accepts four primary values:

  • auto: The browser determines the shape based on the platform, input mode, or text direction. This is typically a thin vertical bar.
  • bar: Renders the caret as a standard vertical line positioned between characters.
  • block: Expands the caret to cover the full width and height of the character cell where the next input will appear.
  • underscore: Renders the caret as a horizontal line beneath the current character position.

Implementing caret-shape in a Terminal Input

To create an authentic terminal environment, caret-shape is commonly paired with caret-color, a monospaced font, and a dark background.

.terminal-input {
  background-color: #0d1117;
  color: #39ff14;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  border: none;
  outline: none;
  width: 100%;
  
  /* Caret configuration */
  caret-shape: block;
  caret-color: #39ff14;
}

When set to block, the cursor matches the exact footprint of a character in the monospaced grid, mimicking environments such as VT100 terminals, MS-DOS, or modern UNIX shells. Using caret-shape: underscore; delivers an alternative prompt style popular in older Unix shells and retro PC BIOS screens.

Benefits Over Custom Implementations

  1. Accessibility and Usability: Native carets maintain correct keyboard navigation, text selection, screen reader tracking, and IME (Input Method Editor) support. Custom DOM-based carets frequently break these behaviors.
  2. Performance: Modifying the native cursor incurs zero JavaScript overhead, avoiding continuous layout recalculations on every keystroke or click.
  3. Code Simplicity: Pure CSS declarations replace dozens of lines of position-calculation scripts.

While caret-shape represents the standard modern approach to styling terminal-like cursors natively, check current browser compatibility tables, as support is actively rolling out across rendering engines. In environments where it is unsupported, browsers safely fall back to the default bar cursor while keeping the input fully functional.