v144 · css

Form Mode Indicator

Each input field type gets a purposeful caret shape: prose fields use bar, numeric fields use underscore, password fields use block, and OTP slots use underscore with monospace spacing — all from the CSS cascade, no JavaScript.

Feature detection: checking…
Contact & registration form — click each field to see its caret shape
Personal details — caret-shape: bar
Numeric fields — caret-shape: underscore
Security — caret-shape: block
One-time code — caret-shape: underscore (green)

caret-shape comparison — click any input

bar
underscore
block
auto
Focus a field to inspect computed caret-shape.
/* Prose fields — vertical bar */
input[type="text"],
input[type="email"],
textarea { caret-shape: bar; }

/* Numeric / code fields — underscore */
input[type="number"],
input[type="tel"] {
  caret-shape: underscore;
  caret-color: var(--accent-blue);
}

/* Password / overwrite mode — block */
input[type="password"] {
  caret-shape: block;
  caret-color: var(--accent-rose);
}

see also