La propriétéCSScaret-color définit la couleur ducurseur d'insertion, parfois appelécurseur de saisie. Il s'agit du marqueur visible qui apparaît au point d'insertion où le prochain caractère tapé sera ajouté ou où le prochain caractère supprimé sera retiré.

Exemple interactif

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section>  <div>    <p>Entrez du texte dans le champ pour voir le curseur&nbsp;:</p>    <p><input type="text" /></p>  </div></section>

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

Syntaxe

/* Valeur avec un mot-clé */caret-color: auto;caret-color: transparent;caret-color: currentColor;/* Valeurs de type <color> */caret-color: red;caret-color: #5729e9;caret-color: rgb(0 200 0);caret-color: hsl(228deg 4% 24% / 80%);/* Valeurs globales */caret-color: inherit;caret-color: initial;caret-color: revert;caret-color: revert-layer;caret-color: unset;

Valeurs

auto

En général, il se rapporte àcurrentColor, la couleur (color) du texte qui sera modifié.

<color>

La couleur du curseur.

Description

Un curseur d'insertion est un indicateur visible de l'endroit, dans un texte éditable — ou dans un élément qui accepte une saisie de texte — où le contenu sera inséré (ou supprimé) par l'utilisateur·ice. Le curseur est généralement une fine ligne verticale indiquant où l'ajout ou la suppression de caractères aura lieu. Il clignote généralement (s'allume et s'éteint), ce qui le rend plus visible. Le curseur n'apparaît que lorsque l'élément éditable a la sélection. Par défaut, ce curseur prend la couleur du texte. La propriétécaret-color peut être utilisée pour définir la couleur de ce curseur sur autre chose quecurrentColor, ou pour réinitialiser un curseur coloré à sa valeur par défaut.

La valeurauto définit le curseur d'insertion surcurrentColor, qui est la couleur (color) du texte ajouté ou supprimé. Les agents utilisateurs peuvent choisir une couleur différente pour garantir une bonne visibilité et un bon contraste avec le contenu environnant, en tenant compte de la couleur (color), de la couleur d'arrière-plan (background-color), des ombres et d'autres facteurs. En pratique, cependant, tous les navigateurs utilisent la couleur courante par défaut, et lorsquecaret-color est défini surauto. Vous pouvez définir n'importe quelle valeur<color> valide.

Comprendre les curseurs d'insertion

Le curseur d'insertion, et donc cette propriété, ne s'applique qu'au texte ou aux éléments pouvant accepter une saisie de texte. Le curseur apparaît dans les éléments d'interface utilisateur ayant la sélection, où les utilisateur·ice·s peuvent modifier le contenu, comme les éléments HTML<input> acceptant du texte libre, l'élément HTML<textarea>, et les éléments avec l'attribut HTMLcontenteditable.

Le curseur peut apparaître dans les éléments<input> de typepassword,text,search,tel etemail. Aucun curseur n'apparaît avec les types d'entrée date,color,hidden,radio oucheckbox. Certains navigateurs affichent un curseur avec le type d'entréenumber. Il est possible, dans certains navigateurs, de faire apparaître un curseur dans des éléments qui n'ont jamais de contenu texte — par exemple, en définissantappearance: none et en ajoutant l'attributcontenteditable. Cependant, cela n'est pas recommandé.

Un curseur peut être affiché dans un élément éditable ou ses descendants, à condition que l'éditabilité ne soit pas désactivée, par exemple en définissant l'attributcontentEditable d'un descendant àfalse. Si un élément n'est pas éditable ou sélectionnable, par exemple siuser-select est défini surnone, le curseur ne doit pas apparaître.

Différence entre curseur d'insertion et curseur de navigation

Il existe plusieurs types de curseurs. Seul le curseur d'insertion est affecté par la propriétécaret-color.

De nombreux navigateurs disposent d'uncurseur de navigation, qui agit de façon similaire au curseur d'insertion mais peut être déplacé dans du texte non éditable.

L'image du curseur de la souris affichée pour certaines valeurs de la propriétécursor (par exemple,auto outext) peut ressembler à un curseur, mais ce n'en est pas un. Il s'agit d'un pointeur.

Animation depuisauto

En général, lorsque la propriétécaret-color est définie surauto ou prend cette valeur par défaut, les agents utilisateurs utilisentcurrentColor, qui est animable. Cependant,auto n'est pas une valeur animable par défaut : lors de l'animation ou de la transition decaret-color deauto vers une autre valeur de couleur, aucune interpolation n'a lieu. L'animation estdiscrète ; la couleur bascule de ou vers la couleurcurrentColor au milieu de laanimation-duration ou de latransition-duration.

Définition formelle

Syntaxe formelle

caret-color =
auto|
<color>

Exemples

Définir une couleur de curseur personnalisée

HTML

<input value="Ce champ utilise un curseur par défaut." size="64" /><input   value="J'ai une couleur de curseur personnalisée !"  size="64" /><p contenteditable>  Ce paragraphe est éditable, et son curseur a aussi une couleur  personnalisée&nbsp;!</p>

CSS

input {  caret-color: auto;  display: block;  margin-bottom: 0.5em;}input.custom {  caret-color: orange;}p.custom {  caret-color: green;}

Result

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétéscaret-animation,caret-shape
• La propriété raccourciecaret
• La propriétécolor
• La propriététext-emphasis
• La propriétécursor
• La propriététext-emphasis
• Le type de donnée<color>
• L'élément HTML<input>
• L'attribut HTMLcontenteditable