Propriété CSS caret-color

La propriété caret-color spécifie la couleur du curseur d'insertion (caret). Il s'agit d'une fine ligne verticale, facilement visible grâce à son clignotement. Par défaut, ce curseur est noir. Toutefois, la propriété caret-color permet d'appliquer n'importe quelle couleur au curseur.

Valeur initiale	auto
S'applique à	Éléments acceptant la saisie de texte.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.caretColor = "#1c87c9";

Syntaxe

Syntaxe de la propriété CSS caret-color

css

caret-color: auto | color;

Exemple de la propriété caret-color :

Exemple de la propriété CSS caret-color avec une valeur transparente et une valeur de couleur

html

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

Try it Yourself »

Valeurs

Valeur	Description
auto	Définit la couleur actuelle du texte. C'est la valeur par défaut.
color	Spécifie une couleur pour le curseur.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle est la fonction de la propriété CSS caret-color ?

Elle vous permet de modifier programmatiquement les couleurs des éléments de votre page HTML.Elle vous permet de changer la couleur du curseur dans un champ de saisie.Elle vous permet de changer la couleur de fond d'une page web.Elle vous permet de définir la couleur de police de votre texte.Elle modifie la couleur du point d'insertion de texte, c'est-à-dire le curseur, dans les éléments de saisie et le contenu éditable.

Propriété CSS caret-color ​

Syntaxe ​

Exemple de la propriété caret-color : ​

Valeurs ​

Pratique ​

Propriété CSS caret-color

Syntaxe

Exemple de la propriété caret-color :

Valeurs

Pratique