caret-shape

Avatar of Geoff Graham
Geoff Graham on

Grow sales with Customer Journey Smarts Mailchimp tracking pixel

The caret-shape property in CSS changes the shape of the text cursor inside editable elements that indicates a user is typing. It’s part of the CSS Basic User Interfaces Module Level 4, which is currently in Working Draft status.

As I write, the caret is the little blinking bar that follows each character I type.

We can use caret-shape to change that bar to something else like, say, a block:

.element {
  caret-shape: block;
}

That’ll produce a caret that’s more like what you might see when typing in the command line:

Syntax

caret-shape: auto | bar | block | underscore
  • Initial value: auto
  • Applies to: elements that accept input
  • Inherited: yes
  • Percentages: n/a
  • Computed value: specified keyword
  • Animation type: by computed value

Values

caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

We don’t have a lot of browser support for caret-shape at the moment (see below), but here’s a rendering of those values.

The words this is a bar caret, followed by a blinking vertical bar that's about one pixel wide.
caret-shape: bar;
The words this is a block caret, followed by the letter x with a blinking light gray background behind it.
caret-shape: block;
The words this is an underscore caret, followed by the letter x with a blinking horizontal black underline beneath it.
caret-shape: underscore;

Browser support

It doesn’t look like any data is available in Caniuse, but with some quick testing, here’s what I found:

IEEdgeFirefoxChromeSafariOpera
NoNoNoNoNoAll
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
NoNoNoNoNo

We can “fake” this

While browser support is what it is, we can actually replicate the effect with other CSS magic.

That’s the sort of thing that’s used on this typewriter animation:

More information