demo · v144
Per-input Shapes
The motivating use case wasn't global theming — it was matching context. A terminal field wants a block caret. An OTP slot wants an underscore. A serif editor wants a slim bar. caret-shape is per-element, like every other CSS property.
caret-shape: checking…
Block caret over a monospace prompt is the convention since VT100.
Underscore matches the placeholder dashes — the cursor fills in the next slot.
Explicit is better than implicit. Browsers may change defaults; the page shouldn't flinch.
Numeric fields look right with a stronger cursor — the user is overwriting digits.
Focus a field to inspect computed caret-shape.
the API
.terminal { caret-shape: block; caret-color: var(--accent-emerald); }
.otp { caret-shape: underscore; }
.editor { caret-shape: bar; }
.amount { caret-shape: block; }