Caret - Propriété CSS

caret

caret-color

caret-shape

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

Description rapide

Définit la couleur et la forme du marqueur de texte.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Oui.

Type d'animation

Voir les propriétés individuelles.

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

Schéma syntaxique de la propriété caret
Les liens du schéma donnent accès à plus de détails

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

color est une couleur, spécifiée dans l'une des syntaxes reconnues par CSS (voir les couleurs CSS).

Description.

La propriété CSS caret définit la couleur et la forme du marqueur de texte. Ce dernier est en général clignotant et apparaît lorsque une zone de saisie de texte est active.

Attention à ne pas confondre la marqueur de texte et le curseur de la souris :

Curseur souris et marqueur de texte

caret est donc une propriété résumée qui permet de définir en une seule règle les propriétés suivantes :

caret-color : couleur du marqueur de texte.
caret-shape : forme du marqueur de texte.

Syntaxes pour `caret`.

caret: auto;

La couleur et la forme du marqueur de texte sont déterminées par le navigateur, en fonction du contexte. La plupart du temps, la couleur est celle du texte (currentColor) et la forme est un trait clignotant (bar) en mode insertion de caractères, et un pavé (block) en mode remplacement de caractères.
caret: bar; caret: block; caret: underscore;

Ces trois valeurs correspondent à des formes prédéfinies pour le curseur de texte. Cliquez dans les zones de saisie ci-dessous pour visualiser ces formes de curseur.

cela ne fonctionnera probablement pas sur votre navigateur (pour le moment en tous cas) car la propriété est encore trop peu prise en charge.

caret:bar;

caret:block;

caret:underscore;
caret: red bar;

Cette syntaxe indique que le marqueur de texte doit avoir la forme d'une mince barre verticale rouge.

Comme toutes les propriété résumée, caret initialise les deux valeurs même si une seule est précisée. Par exemple, la syntaxe caret:bar; définit la forme du marqueur, mais rétablit également la couleur du marqueur à currentColor qui est sa valeur initiale.

Valeurs communes :


caret: initial  (auto)
caret: inherit
caret: revert
caret: revertLayer
caret: unset


caret-color: initial  (auto)
caret-color: inherit
caret-color: revert
caret-color: revertLayer
caret-color: unset


caret-shape: initial  (auto)
caret-shape: inherit
caret-shape: revert
caret-shape: revertLayer
caret-shape: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de `caret`.

L'animation de la propriété caret est possible, mais d'un intérêt limité.

La propriété caret est-elle bien prise en charge ?

La propriété caret est nouvelle : très peu de navigateurs la prennent en charge (2024).

Historique de la propriété `caret`.

Module CSS - Interface utilisateur de base - Niveau 4

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

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 qui agissent sur l'interface utilisateur :