Caret-shape - CSS Property
Summary of characteristics of the caret-shape property
auto | bar | block | underscoreautoDiscrète: during an animation, the caret-shape property passes from one value to another without transition.Syntax diagram of caret-shape.
caret-shape property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
Description of the caret-shape property.
The CSS property caret-shape sets the shape of the insertion caret, that is, the blinking cursor that appears when you click in an input area.
The cursor associated with the mouse is not affected by this property.
See the other properties related to the insertion caret (we also show cursor, which is more related to the mouse pointer):
Values for caret-shape.
- caret-shape: auto;
The shape of the inserting caret is determined by the browser, depending on the context. For example, typing in insert mode usually corresponds to a vertical blinking caret (
bar), while typing in overwrite mode corresponds to a rectangular caret (block). - caret-shape: bar;
The insertion caret is shaped like a thin vertical bar, located where the character you type will appear. This cursor never overlaps a character that's already been typed: it works in insert mode.
The insertion caret can sometimes tilt when typing in italics or slanted characters.
- caret-shape: block;
The insertion caret has the shape of a rectangle over one of the characters already entered. This marker corresponds to an input that's replacing it.
This caret can possibly tilt when typing is done in italics or slanted characters.
- caret-shape: underscore;
The insertion caret is shaped like a small horizontal bar, positioned below the text line.
- caret-shape: initial; (
auto) caret-shape: inherit; caret-shape: revert; caret-shape: revert-layer; caret-shape: revert-rule; caret-shape: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the caret-shape property.
LThe property caret-shape can be animated according to the CSS standard, but it's not very useful (in our opinion).
Access the caret-shape property via a program
With Javascript, change the value of caret-shape.
In JavaScript, here's how to change the value of caret-shape. You can see that JavaScript offers a syntax with the typical CSS-style notation,
in kebab-case (a dash to separate words), and another syntax with camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['caret-shape'] = 'block';
// or
let el = document.getElementById('id');
el.style.caretShape = 'block';
With Javascript, read the value of caret-shape.
The property must have been applied directly to the element itself through its style attribute, and not via a CSS selector.
let el = document.getElementById('id');
let value = el.style['caret-shape'];
// or
let el = document.getElementById('id');
let value = el.style.caretShape;
With Javascript, read the computed value of caret-shape.
The computed value is the one that comes from evaluating the chain of inheritances, or if not, it's the initial value of the property: auto.
The computed value is always set.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('caret-shape');
With JQuery, read or change the value of caret-shape.
// Read the value:
$('#id').prop('caret-shape');
// Write the value:
$('#id').prop('caret-shape', 'block');
$('#id').prop('{caret-shape': 'block'});
With JQuery, read the computed value of caret-shape.
let value = $('#id').css('caret-shape');
Test it yourself.
The buttons below apply the entered value to the caret-shape property and then display either the value as it was applied or the computed value.
The second option lets you see how the value of caret-shape is stored (serialized). In the case of caret-shape, there won't be any
difference between the two values since they are always predefined values, unless you enter an incorrect value.
Simulator.
The caret is the little blinking symbol that shows where the next character you type will appear. It only shows up when the input box is selected.
⚠ Doesn't work on all browsers.
Browsers compatibility with caret-shape.
The property caret-shape is still poorly supported by browsers: major browsers like Firefox 
don't support it yet (2026).
caret-shape property, which defines the shape of the text cursor (the blinking cursor that shows where the typed character will appear).caret-color property to define the color of the text cursor that appears in editable areas.caret-shapeproperty
caret-colorproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the caret-shape 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.
Regardingcaret-shapeAdding the ability to choose the shape of the caret, with thecaret-shapeproperty.
September 22, 2015Working 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 defined in this standard:
Properties:
interest-delay-start and interest-delay-end.