caret-color

La propriété CSS caret-color définit 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.

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.

Syntaxe

/* 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);

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>où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
où 
<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	Définition initiale.

Valeur initiale	`auto`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	`auto` is computed as specified and `<color>` values are computed as defined for the `color` property.
Type d'animation	une couleur

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`caret-color`	Chrome Support complet 57	Edge Support complet 79	Firefox Support complet 53	IE Aucun support Non	Opera Support complet 44	Safari Support complet 11.1	WebView Android Support complet 57	Chrome Android Support complet 57	Firefox Android Support complet 53	Opera Android Support complet 43	Safari iOS Support complet 11.3	Samsung Internet Android Support complet 7.0

Légende

Support complet: Support complet
Aucun support: Aucun support

Voir aussi

<input>
L'attribut HTML contenteditable qui rend le texte d'un élément éditable
Rendre du contenu éditable
Appliquer des couleurs sur des éléments HTML grâce à CSS
Le type de données <color>
Les autres propriétés relatives aux couleurs : color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color et column-rule-color.