W3docs
fr
Se connecter

Propriété CSS caret-color

La propriété CSS caret-color définit la couleur du curseur de saisie. Découvrez-la avec des exemples pratiques.

La propriété CSS caret-color définit la couleur du curseur d'insertion — cette fine ligne verticale clignotante qui indique l'endroit où le texte saisi apparaîtra dans un champ de texte ou tout élément modifiable. Par défaut, le curseur reprend la couleur du texte définie par le navigateur (généralement noir). Avec caret-color, vous pouvez le recolorer pour correspondre à votre charte graphique, améliorer le contraste sur un fond de champ de saisie coloré, ou le masquer entièrement.

Le curseur d'insertion est uniquement un indicateur de frappe. Il ne correspond pas au curseur de la souris (contrôlé par la propriété cursor) et n'affecte pas la couleur de surbrillance de la sélection.

Cette page couvre le fonctionnement de caret-color, les éléments auxquels il s'applique, ses valeurs acceptées, ainsi que les pièges à connaître avant de l'utiliser en production.

Valeur initialeauto
S'applique àLes éléments acceptant la saisie de texte.
HéritéeOui.
AnimableOui (en tant que couleur).
VersionCSS3
Syntaxe DOMobject.style.caretColor = "#1c87c9";

Où s'applique caret-color

Le curseur apparaît partout où l'utilisateur peut taper ou positionner un curseur d'édition de texte. Ainsi, caret-color s'applique à :

  • Les champs <input> acceptant du texte (text, search, email, url, password, tel, number).
  • Les éléments <textarea>.
  • Tout élément possédant l'attribut contenteditable défini à true.

Comme la propriété est héritée, vous pouvez la définir une seule fois sur un conteneur (ou sur :root) et chaque descendant modifiable en hérite automatiquement — pratique pour thématiser tout un formulaire avec une seule règle.

Syntaxe

caret-color: auto | <color>;

Exemple : curseur transparent et curseur personnalisé

Le premier champ conserve le curseur par défaut, le deuxième masque son curseur avec transparent, et le troisième utilise un bleu personnalisé :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .caret-example1 {
        caret-color: transparent;
      }
      .caret-example2 {
        caret-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Caret-color property example</h2>
    <input value="Default caret color" />
    <br />
    <br />
    <input class="caret-example1" value="Transparent caret color" />
    <br />
    <br />
    <input class="caret-example2" value="Custom caret color" />
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescription
autoLe navigateur choisit une couleur appropriée, généralement currentColor (la couleur du texte de l'élément). C'est la valeur par défaut.
<color>Toute couleur CSS valide : une couleur nommée, hexadécimale (#1c87c9), rgb()/rgba(), ou hsl()/hsla(). Utilisez transparent pour masquer le curseur.
initialRéinitialise la propriété à sa valeur par défaut (auto).
inheritPrend la valeur calculée de l'élément parent.

Tous les formats de couleur sont acceptés, ainsi les déclarations suivantes sont toutes valides :

caret-color: red;            /* named color   */
caret-color: #1c87c9;        /* hex           */
caret-color: rgb(28 135 201);/* rgb           */
caret-color: hsl(202 76% 45%);/* hsl          */
caret-color: transparent;    /* invisible caret */

Consultez les noms de couleurs CSS pour la liste complète des mots-clés, et la propriété color pour comprendre la résolution de currentColor.

Pièges et conseils

  • auto se résout en currentColor. Si vous modifiez uniquement la color du texte, le curseur la suit automatiquement — vous n'avez généralement pas besoin de caret-color à moins de vouloir que le curseur diffère du texte.
  • transparent masque le curseur sans désactiver la saisie. Le champ accepte toujours la saisie ; seul l'indicateur clignotant disparaît. Évitez cela sur de vrais formulaires — un curseur invisible nuit à l'ergonomie et à l'accessibilité.
  • Aucun effet sur les éléments non modifiables. Définir caret-color sur un <div> sans contenteditable, ou sur un champ désactivé ou en lecture seule, ne produit aucun effet car aucun curseur n'y est dessiné.
  • Attention au contraste. Un curseur qui se fond dans un fond de saisie sombre peut être difficile à repérer. Choisissez une couleur qui se distingue, comme vous le feriez pour le contraste du texte.
  • Elle est animable. La valeur étant une couleur, vous pouvez la faire transitionner — par exemple, faire passer le curseur vers une couleur de mise en évidence lorsque le champ reçoit le focus.
input {
  caret-color: #999;
  transition: caret-color 0.2s ease;
}
input:focus {
  caret-color: #1c87c9;
}

Compatibilité des navigateurs

caret-color est prise en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera). Elle se dégrade gracieusement : les navigateurs qui ne la reconnaissent pas affichent simplement le curseur par défaut, il n'y a donc aucun inconvénient à l'utiliser sans solution de repli.

Propriétés associées

  • color — couleur du texte, et source de currentColor vers laquelle caret-color: auto bascule.
  • outline-color — couleur du contour de focus souvent affiché à côté d'un champ actif.
  • opacity — atténuer un élément, y compris son curseur.

Pratique

Pratique
Quelle est la fonction de la propriété CSS caret-color ?
Quelle est la fonction de la propriété CSS caret-color ?
Was this page helpful?