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.
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
currentcolormais 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 utilisercurrentcolorpour 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 |
| Média | interactif |
| Valeur calculée | auto is computed as specified and <color> values are computed as defined for the color property. |
| Type d'animation | une couleur |
| Ordre canonique | selon la grammaire |
Compatibilité des navigateurs
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
caret-color | Chrome Support complet 57 | Edge Aucun support Non | Firefox Support complet 53 | IE Aucun support Non | Opera Support complet 44 | Safari Support complet 11.1 | WebView Android Support complet 57 | Chrome Android Support complet 57 | Firefox Android Support complet 53 | Opera Android Support complet 43 | Safari iOS Support complet 11.1 | Samsung Internet Android Support complet 7.0 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
Voir aussi
<input>- L'attribut HTML
contenteditablequi 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-coloretcolumn-rule-color.