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.
Description de la propriété caret-shape.
caret-color est quant à elle bien reconnue.
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é.
Reportez-vous également à la propriété résumée caret qui permet de définir en une écriture unique la couleur et la forme du curseur de texte.
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, tandis que la saisie en remplacement correspond à un marqueur de forme rectangulaire (pavé).
- 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 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: revertLayer; caret-shape: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,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).
Exemple interactif.
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.
La propriété caret-shape est-elle bien prise en charge ?
La propriété caret-shape est nouvelle : très peu de navigateurs la prennent en charge (2025).
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
Samsung Internet
Opéra
Chrome
Edge
Safari
Chrome pour Androïd
Safari sur IOS
Firefox pour Androïd
Androïd Brower
Firefox
KaiOS Browser
Opéra mini
Histoire de la propriété caret-shape.
-
Module CSS - Interface utilisateur de base - Niveau 4
Concernantcaret-shape. Ajout 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 :