caret-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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.

Exemple interactif

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

css
/* 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.

Définition formelle

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

Syntaxe formelle

caret-color = 
auto |
<color>

Exemples

CSS

css
#exemple {
  caret-color: red;
}

HTML

html
<input id="exemple" />

Résultat

Spécifications

Specification
CSS Basic User Interface Module Level 4
# caret-color

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caret-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi