v144 · css

CSS caret-shape property

The shape of the caret in native applications is most commonly a vertical bar, an underscore or a rectangular block. In addition, the shape often varies depending on the input mode, such as insert or replace. The CSS caret-shape property allows sites to choose one of these shapes for the caret inside editable elements, or leave the choice up to the browser.

concepts

  1. Caret Shape Picker

    Set the visual shape of the text-input caret. Useful for terminal-style inputs (block caret) or aesthetics in custom editors.

  2. Per-input Shapes

    The intended use case: different caret shapes per field — block for terminal prompts, underscore for OTP slots, bar for prose, block for numeric — all from the cascade.

  3. Insert vs Overwrite

    Modal editing pattern from vi, vim, and retro terminals. Press Insert to flip modes — the caret switches from bar to block via a CSS attribute selector. No caret math.

  4. Retro Terminal

    Full terminal emulation using caret-shape: block with a CSS blink animation. Type commands (help, ls, whoami, date) and swap between caret shapes to see how the cursor character changes the terminal feel.

  5. Form Mode Indicator

    A full contact form where prose fields get bar, numeric fields get underscore (blue), password fields get block (red), and OTP slots get underscore (green) — all from the CSS cascade based on input type, with a shape comparison grid.

  6. Caret Theme Builder

    Combine caret-shape, caret-color, and valid caret-animation modes into a named theme. Five presets, manual controls, live preview in a code editor and prose fields, plus a copy-ready CSS snippet.

why it shipped

To allow authors to specify the desired shape of the text insertion caret.

references