Caret-shape - Propriété CSS

caret-shape

Résumé des caractéristiques de la propriété `caret-shape`

Description rapide

Définit la forme du curseur de texte.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

auto | bar | block | underscore

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété caret-shape passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Interface utilisateur de base

Références (W3C)

CSS Basic User Interface Module Level 4

Statut du document: WD (document de travail)

Schéma syntaxique de `caret-shape`.

Schéma syntaxique de la propriété caret-shape
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

Description.

⚠

Curieusement, cette propriété, qui parait pourtant courante, est très mal prise en charge par les navigateurs actuels (2022). C'est d'autant plus étonnant que la propriété 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 apparait lorsqu'on a cliqué dans une zone de saisie. Le curseur associé à la souris n'est pas impacté par cette propriété.

Curseur souris et marqueur de texte

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.

Syntaxes 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.

Valeurs communes à toutes les propriétés :


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.

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.

Pour que le marqueur de texte apparaisse, vous devrez cliquer dans la zone de saisie.

caret-shape :

auto

bar

block

underscore

Test :

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 (2022).

Historique de la propriété `caret-shape`.

Module CSS - Interface utilisateur de base - Niveau 4

Ajout de la possibilité de choisir la forme du curseur, avec la propriété caret-shape.

22 Septembre 2015
Document 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 CSS Basic User Interface Module du W3C. Voici les principales propriétés définies dans cette norme :