La propriété CSS caret-color permet de définir la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.

/* Valeur avec un mot-clé */
caret-color: auto;
caret-color: transparent;
color: currentColor;

/* Valeurs de couleur */
/* Type <color> */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

Note : Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque cursor vaut auto ou text ou vertical-text, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiainteractif
Valeur calculéeauto is computed as specified and <color> values are computed as defined for the color property.
Type d'animationune couleur
Ordre canoniqueselon la grammaire

Syntaxe

Valeurs

auto
L'agent utilisateur doit utiliser currentcolor mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).
Note : Bien que l'agent utilisateur puisse utiliser currentcolor pour la valeur auto, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur currentcolor).
<color>
L'agent utilisateur utilise la couleur (<color>) indiquée comme couleur pour le curseur de saisie.

Syntaxe formelle

auto | <color>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

#exemple {
  caret-color: red;
}

HTML

<input id="exemple" />

Résultat

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 3
La définition de 'caret-color' dans cette spécification.
Recommendation proposée Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple57 Non53 Non44 Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple5757 Non5344 Non ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,