Caret-shape - Propriété CSS
Résumé des caractéristiques de la propriété caret-shape
auto | bar | block | underscoreautocaret-shape passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de caret-shape.
caret-shape.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description de la propriété caret-shape.
La propriété CSS caret-shape définit la forme du marqueur de texte, c'est à dire le curseur clignotant qui apparaît lorsqu'on a cliqué
dans une zone de saisie. Le curseur associé à la souris n'est pas impacté par cette propriété.
Voir les autres propriétés relatives au marqueur de texte (nous indiquons également cursor qui est plutôt relatif au pointeur de la souris) :
Valeurs pour caret-shape.
- caret-shape: auto;
La forme du marqueur de texte est déterminée par le navigateur, en fonction du contexte. Par exemple la saisie en mode insertion correspond normalement à un marqueur de texte du type trait vertical clignotant (
bar), tandis que la saisie en remplacement correspond à un marqueur de forme rectangulaire (block). - caret-shape: bar;
Le marqueur de texte a la forme d'une mince barre verticale, positionnée à l'endroit où le caractère saisi va apparaître. Ce marqueur ne se superpose jamais à un caractère déjà saisi : il correspond à une saisie par insertion.
Le marqueur de texte peut éventuellement s'incliner lorsque la saisie se fait en caractères italiques ou obliques.
- caret-shape: block;
Le marqueur de texte a la forme d'un rectangle superposé à un des caractères déjà saisi. Ce marqueur correspond à une saisie en remplacement.
Ce marqueur de texte peut éventuellement s'incliner lorsque la saisie se fait en caractères italiques ou obliques.
- caret-shape: underscore;
Le marqueur de texte a la forme d'une petite barre horizontale, positionnée en dessous de la ligne de texte.
- caret-shape: initial; (
auto) caret-shape: inherit; caret-shape: revert; caret-shape: revert-layer; caret-shape: revert-rule; caret-shape: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,revert-rule,unset.
Exemple d'animation de caret-shape.
La propriété caret-shape peut être animée, d'après la norme CSS, mais cela présente peu d'intérêt (à notre avis).
Accéder à la propriété caret-shape par programme.
Avec Javascript, modifier la valeur de caret-shape.
En Javascript, voici comment modifier la valeur de caret-shape.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['caret-shape'] = 'block';
// ou
let el = document.getElementById('id');
el.style.caretShape = 'block';
Avec Javascript, lire la valeur de caret-shape.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['caret-shape'];
// ou
let el = document.getElementById('id');
let value = el.style.caretShape;
Avec Javascript, lire la valeur calculée de caret-shape.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages, ou à défaut, c'est la valeur initiale de la propriété : auto.
La valeur calculée est toujours définie.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('caret-shape');
Avec JQuery, lire ou modifier la valeur de caret-shape.
// Lire la valeur :
$('#id').prop('caret-shape');
// Écrire la valeur :
$('#id').prop('caret-shape', 'block');
$('#id').prop('{caret-shape': 'block'});
Avec JQuery, lire la valeur calculée de caret-shape.
let value = $('#id').css('caret-shape');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété caret-shape et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de caret-shape.
Dans le cas de caret-shape il n'y aura pas de différences entree les deux valeurs puisqu'il s'agit forcément de valeurs prédéfinies, sauf si
vous saisissez une valeur incorrecte.
Exemple interactif avec la propriété caret-shape.
Le marqueur est le petit symbole clignotant qui indique à quel endroit le prochain caractère saisie apparaîtra. Il ne s'affiche que lorsque la zone de saisie est sélectionnée.
⚠ Ne fonctionne pas sur tous les navigateurs.
Compatibilité des navigateurs avec caret-shape.
La propriété caret-shape est encore mal gérée par les navigateurs : de grands navigateurs comme Firefox 
ne la prennent pas encore en charge (2026).
caret-shape qui définit la forme du marqueur de texte (curseur clignotant qui indique à quel endroit le caractère tapé va apparaitre).caret-color pour définir la couleur du curseur de texte qui apparait dans les zones éditables.caret-shapecaret-colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
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
Histoire de la propriété caret-shape.
-
Module CSS - Interface utilisateur de base - Niveau 4
Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.
Concernantcaret-shapeAjout de la possibilité de choisir la forme du curseur, avec la propriétécaret-shape.
22 Septembre 2015Document de travail.
Voir aussi, au sujet de l'interface utilisateur.
Les possibilités de personnalisation ou de stylisation de l'interface utilisateur (UI) sont décrites dans la spécification module CSS - Interface utilisateur de base du W3C. Voici les principales propriétés définies dans cette norme :
Propriétés :
interest-delay-start et interest-delay-end.