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é CSS accent-color définit la 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 class="default-example container" id="default-example">
<div>
<input checked id="example-element" type="checkbox" />
<label for="example-element" id="example-label">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 charge accent-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 is computed as specified and <color> values are computed as defined for the color property. |
| Type d'animation | by computed value type |
Syntaxe formelle
accent-color =
auto |
<color>
Exemples
Définir une couleur d'accentuation personnalisée
HTML
<input type="checkbox" checked />
<input type="checkbox" class="custom" 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>