Propriété CSS caret-color

La propriété caret-color spécifie la couleur de la barre d'insertion. C'est une ligne mince verticale, qui est initialement noire. Cette propriété permet d'appliquer n'importe quelle couleur à la barre d'insertion.

Valeur initiale auto
Appliquée à Tous les éléments.
Héritée Oui.
Animable Non.
Version CSS3
Syntaxe DOM object.style.caretColor = "#1c87c9";

Syntaxe

caret-color: auto | color;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .caret-example1 {
      caret-color: transparent;
      }
      .caret-example2 {
      caret-color: #1c87c9 ;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété caret-color</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>

Valeurs

Valeur Description
auto Définit la couleur actuelle du texte. C'est la valeur initiale.
color Spécifie la couleur de la propriété caret.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome edge firefox safari opera
57.0+ 53.0+ 11.1+ 44.0+

Pratiquez vos connaissances

Qu'est-ce que la propriété 'caret-color' en CSS?
Trouvez-vous cela utile?