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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
/* 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 utilisercurrentcolor
pour la valeurauto
, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeurcurrentcolor
). - <color>
- L'agent utilisateur utilise la couleur (
<color>
) indiquée comme couleur pour le curseur de saisie.
Syntaxe formelle
auto | <color>où
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )où
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Exemples
CSS
#exemple {
caret-color: red;
}
HTML
<input id="exemple" />
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Basic User Interface Module Level 3 La définition de 'caret-color' dans cette spécification. |
Recommendation | Définition initiale. |
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 |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
<input>
- L'attribut HTML
contenteditable
qui rend le texte d'un élément éditable - Rendre du contenu éditable
- Appliquer des couleurs sur des éléments HTML grâce à CSS
- Le type de données
<color>
- Les autres propriétés relatives aux couleurs :
color
,background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
etcolumn-rule-color
.