Limited supportLimited browser support. Check compatibility before use.
Other Limited support

caret-shape

The caret-shape CSS property sets the shape of the insertion caret, the symbol that shows where the next character is to be inserted or deleted.

Other

Overview

The caret-shape CSS property sets the shape of the insertion caret, the symbol that shows where the next character is to be inserted or deleted.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
caret-shape
Experimental
144
144
144
auto
Experimental
144
144
144
bar
Experimental
144
144
144
block
Experimental
144
144
144
underscore
Experimental
144
144
144
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.terminal-input {
  caret-shape: block;
  caret-color: lime;
}
.editor {
  caret-shape: underscore;
}

Live demo

Block(block)

CSS Block(block) demo.

PreviewFullscreen

underscore

CSS Underscore demo.

PreviewFullscreen

Bar(default)

CSS Bar(default) demo.

PreviewFullscreen

Use cases

  • Using caret-shape

    The caret-shape CSS property sets the shape of the insertion caret, the symbol that shows where the next character is to be inserted or deleted.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features