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.
![](gif/blinking-caet9744.gif)
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:
![](gif/caret-blockd942.gif)
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.](gif/caret-bar18ee.gif)
caret-shape: bar;
![The words this is a block caret, followed by the letter x with a blinking light gray background behind it.](gif/caret-blockd942.gif)
caret-shape: block;
![The words this is an underscore caret, followed by the letter x with a blinking horizontal black underline beneath it.](gif/caret-shape-underscore0f8c.gif)
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:
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
No | No | No | No | No | All |
Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
---|---|---|---|---|
No | No | No | No | No |
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
- CSS Basic User Interface Module Level 4 (Working Draft)