`Caret` - CSS Property

caret

caret-color

caret-shape

Summary of characteristics of the `caret` property

Quick description

Short-hand property grouping all properties related to the text marker.

Status

Compatibility issues ⚠

Percentages

Not applicable.

Initial value

auto

Inherited by default

Yes.

Animation type

See individual properties.

Canonical order

Per grammar: serialization in the order of syntax.

W3C Module

CSS Basic User Interface Module

References (W3C)

CSS Basic User Interface Module Level 4

Document status: WD (Working Draft)

Syntax diagram of `caret`.

Syntax diagram of the caret property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

color is a color, specified in one of the syntaxes recognized by CSS (see Colors).

Description.

⚠

Browsers don't recognize the summarized property caret yet (2026).

The CSS property caret is a shorthand property that sets all the insertion caret settings, including its color, whether it has an animation, and the shape of the text cursor. The insertion caret usually blinks and shows up when a text input area is active.

Be careful not to confuse the insertion caret with the mouse cursor:

Mouse pointer.

Insertion caret (blinking).

caret is therefore a shorthand property that allows you to define the following properties in a single rule:

caret-color : Chooses the color of the text marker (flashing cursor).
caret-animation : This property determines whether the default blinking of the text cursor should be maintained.
caret-shape : Sets the shape of the text caret.

You can also refer to the cursor property, which handles the shape of the mouse pointer:

cursor : Sets the shape of the mouse cursor.

Values for `caret`.

caret: auto;

The color, shape of the insertion caret, and its blinking are determined by the browser, depending on the context. Most of the time, the color matches the text (currentColor) and the shape is a blinking line (bar) in insert mode, and a block (block) in overwrite mode.
caret: bar; caret: block; caret: underscore;

These three values correspond to predefined shapes for the insertion caret. Click in the input fields below to see these cursor shapes.

This probably won't work on your browser (at least for now) because the property is still too poorly supported.

caret:bar;

caret:block;

caret:underscore;
caret: manual;

The manual value disables the default blinking of the insertion caret. This option is useful when you want to animate another feature of the caret (color, shape).

caret:manuel;
caret: red manual bar;

This (complete) syntax indicates that the text marker should be in the form of a thin red vertical bar that doesn't blink.

Like all shorthand property, caret initializes all three values even if only one is specified. For example, the syntax caret:bar; sets the shape of the insertion caret, but also resets the blink of the caret, and color to currentColor, which are the initial values.

caret:red manual bar;
caret: initial; (auto) caret: inherit; caret: revert; caret: revert-layer; caret: revert-rule; caret: unset;
caret-color: initial; (auto) caret-color: inherit; caret-color: revert; caret-color: revert-layer; caret-color: revert-rule; caret-color: unset;
caret-animation: initial; (auto) caret-animation: inherit; caret-animation: revert; caret-animation: revert-layer; caret-animation: revert-rule; caret-animation: unset;
caret-shape: initial; (auto) caret-shape: inherit; caret-shape: revert; caret-shape: revert-layer; caret-shape: revert-rule; caret-shape: unset;

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the `caret` property.

Animation of the property caret is possible, but of limited interest. Refer to the detailed properties for examples.

Browsers compatibility with `caret`.

The caret property is still poorly supported. As long as browsers don't recognize caret-shape and caret-animation, support for the shorthand property will be lacking (2026).

Historic of the `caret` property.

CSS Basic User Interface Module Level 4

This level 4 of the specification builds on the definitions already established in level 3. It also includes some additions: text marker management is more detailed, several properties concern the mouse pointer, etc.

Regarding caret Addition of a summarized property to choose in a single entry the color of the text marker, the presence of blinking, and the shape of the marker.

September 22, 2015
Working Draft.

See also, regarding the user interface.

The possibilities for customizing or styling the user interface (UI) are described in the specification CSS Basic User Interface Module of the W3C. Here are the main properties that affect the user interface: