caret-color
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis â¨janvier 2020â©.
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.
Exemple interactif
caret-color: red;
caret-color: auto;
caret-color: transparent;
<section class="default-example container" id="default-example">
<div>
<p>Enter text in the field to see the caret:</p>
<p><input id="example-element" type="text" /></p>
</div>
</section>
#example-element {
font-size: 1.2rem;
}
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 utiliser
currentcolorpour 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.
Définition formelle
| 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 |
Syntaxe formelle
caret-color =
auto |
<color>
Exemples
CSS
#exemple {
caret-color: red;
}
HTML
<input id="exemple" />
Résultat
Spécifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # caret-color |
Compatibilité des navigateurs
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.