Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
accent-color
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriétéCSSaccent-color définitla couleur d'accentuation pour les contrôles d'interface utilisateur générés par certains éléments.
Exemple interactif
accent-color: red;accent-color: #74992e;accent-color: rgb(255 255 128);accent-color: hsl(250 100% 34%);<section> <div> <input checked type="checkbox" /> <label for="example-element">Libellé d'exemple</label> </div></section>.container > div { display: flex; align-items: center;}#example-element { width: 40px; height: 40px;}#example-label { margin-left: 10px; font-size: x-large;}Syntaxe
/* Valeurs avec un mot-clé */accent-color: auto;/* Valeurs de <color> */accent-color: darkred;accent-color: #5729e9;accent-color: rgb(0 200 0);accent-color: hsl(228 4% 24%);/* Valeurs globales */accent-color: inherit;accent-color: initial;accent-color: revert;accent-color: revert-layer;accent-color: unset;Valeurs
Description
Les navigateurs qui prennent en chargeaccent-color l'appliquent actuellement aux éléments HTML suivants :
Chaque agent utilisateur possède une couleur d'accentuation, avec des variations pour garantir la lisibilité et le contraste. Cette couleur d'accentuation n'est pas utilisée par tous les contrôles d'interface utilisateur ni dans tous les états de ces contrôles. La propriétéaccent-color n'est appliquée qu'aux contrôles d'interface utilisateur qui utilisent une couleur d'accentuation dans les états où cela est pertinent.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | auto est calculé comme défini et les valeurs<color> sont calculées comme défini pour la propriétécolor. |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
accent-color =
auto|
<color>
Exemples
Définir une couleur d'accentuation personnalisée
HTML
<input type="checkbox" checked /><input type="checkbox" checked />CSS
input { accent-color: auto; display: block; width: 30px; height: 30px;}input.custom { accent-color: rebeccapurple;}Résultat
Spécifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # widget-accent |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
background-color,border-color,caret-color,color,column-rule-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow - Le type de donnée
<color> - L'élément HTML
<input>