caret-color

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 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

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>Enter text in the field to see the caret:</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

#example-element {
  font-size: 1.2rem;
}

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