Caret Customization on the Web
A caret is the symbol used to show where text will appear in text input applications,such as a word processor, code editor or input form. It might be a vertical bar, or an underscore, or some other shape. It may flash, or pulse.
On the web, sites currently have some control over the editing caret through CSS, along with entirely custom solutions. Here I discuss the current state of caret customization on the web and look at proposals to allow more customization through CSS.
Carets on the Web #
The majority of web sites use the default editing caret. In all browsers it is a vertical bar in the text color that blinks. The blink rate and duration varies across browsers: Chrome’s cursor blinks continuously at a fixed rate; Firefox blinks the caret continuously at a rate from user settings; Safari blinks with keyboard input but switches to a strobe effect with dictation input.
All browsers support the CSS caret-color
property allowing sites to color the caret independent of the text, and allow the color
to be animated. You can also make the caret disappear with a transparent color.
Changing the caret shape is currently not possible through CSS in any browser. There are some ways to work around this, such as those documented in this Stack Overflow post. The general idea is hide the caret and replace it with an element controlled by script. The script relies on the selection range and other APIs to know where the element should be positioned. Or you can completely replace the default browser editing behavior with a custom javascript editor (as is done by, for example, Google Docs).
Browser support for caret customization currently leaves web developers in an awkward situation: accept the basic default cursor with color control, or implement a custom editor, but nothing in-between.
Improving Caret Customization #
There are at least two CSS properties not yet implemented in browsers that improve caret customization. The first concerns the interaction between color animation and the default blinking behavior, and the second adds support for different caret shapes.
The CSS caret-animation property #
When the caret-color is animated, there is no way to reliably synchronize the
animation with the browser’s blinking rate. Different browsers blink at different
rates, and it may be under user control. The
CSS caret-animation property, when
set to the value manual suppresses the blinking, giving the color animation
complete control over the color of the caret at all times. Using caret-animation: auto
(the initial value) leaves the blinking behavior under browser control.
Site control of the blinking is both an accessibility benefit and potentially harmful to users. For users sensitive to motion, disabling the blinking may be a benefit. At the same time, a cursor that does not blink is much harder for users to recognize. Please use caution when employing this property when it is available in browsers.
There is an implementation of caret-animation in Chrome 132 behind the CSSCaretAnimation flag,
accessible through --enable-blink-features="CSSCaretAnimation" on the command line.
Feel free to comment on the bug
if you have thoughts on this feature.
The 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, or leave the choice
up to the browser. The recognized property values are auto, bar, block and
underscore.
No browser currently supports the caret-shape property, and the specification
needs a little work to confirm the exact location and shape of the underscore
and block. Please leave feedback on the Chromium bug
if you would like this feature to be implemented.
Other proposed caret properties #
The caret-shape property does not allow any control over the size of the
caret, such as the thickness of the bar or block. There was, for example,
a proposal to add caret-width
as a means for working around browser bugs on zooming and transforming the
caret. Please create a new CSS working Group issue if you would like
greater customization and can provide use cases.
- Previous: CSS Highlight Inheritance has Shipped!
- Next: Canvas Text Editing