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.
caret-shape: bar;caret-shape: block;
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)
