Limited support Limited browser support. Check compatibility before use.

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.

Other

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

    Experimental: This is an experimental technology

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

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

Related links