CSS caret-shape property

Category: CSS
Type: New or changed feature
Status: Proposed (Chrome Proposed)
Intent stage: None

Summary

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. The recognized property values are auto, bar, block and underscore.

Motivation

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

Standards & signals

Specification: https://drafts.csswg.org/css-ui/#caret-shape
Firefox: Positive — dholbert commented - "Seems reasonable; I'd suggest a "positive" standards-position. There are a handful of use-cases that use a caret-shape: block sort of rendering that I can find - e.g. gnome-terminal (which lets you choose between Block, I-Beam, and Underline) and the graphical version of emacs. And it seems useful for the web platform to offer the same sort of cosmetic flexibility in matching that caret-style, for web developers who are designing a web-based application inspired by these sorts of native applications. (Masayuki mentions a case in https://bugzilla.mozilla.org/show_bug.cgi?id=1715487#c0 where this sort of feature might make things easier for Korean IME users, too; so there's potentially a usability benefit for some international audiences.)"
Safari: No signal
Web developers: No signals — Bloomberg have requested this. Also see above comments by dholbert on possible use cases.
Tracking bug: https://issues.chromium.org/issues/353713061

Explainers: https://drafts.csswg.org/css-ui/#caret-shape

View on chromestatus.com