Couleur d'accentuation CSS

Appliquez la couleur de votre marque aux entrées de formulaire HTML intégrées avec une seule ligne de code.

Adam Argyle
Joey Arhar
Joey Arhar
X GitHub

Publié le 11 août 2021

Les éléments de formulaire HTML actuels sont difficiles à personnaliser. On a l'impression de devoir choisir entre peu ou pas de styles personnalisés, ou de réinitialiser les styles d'entrée et de les reconstruire à partir de zéro. La création à partir de zéro s'avère beaucoup plus laborieuse que prévu. Cela peut également entraîner l'oubli de styles pour les états des éléments (indéterminé, c'est à toi que je m'adresse) et la perte de fonctionnalités d'accessibilité intégrées. La recréation complète de ce que fournit le navigateur peut représenter plus de travail que vous ne le souhaitez.

accent-color: hotpink;

Le CSS accent-color de la spécification de l'UI CSS est là pour teinter les éléments avec une seule ligne de CSS, ce qui vous évite des efforts de personnalisation en vous permettant d'intégrer votre marque dans les éléments.

Capture d'écran d'une démo de couleur d'accentuation dans un thème clair où la case à cocher, les boutons radio, le curseur de plage et l'élément de progression sont tous teintés en rose vif.
Démo

La propriété accent-color fonctionne également avec color-scheme, ce qui permet aux auteurs de teinter les éléments clairs et sombres. Dans l'exemple suivant, l'utilisateur a activé un thème sombre, la page utilise color-scheme: light dark et le même accent-color: hotpink pour les commandes rose vif teintées du thème sombre.

Capture d'écran d'un thème sombre de la démo de couleur d'accentuation où la case à cocher, les boutons radio, le curseur de plage et l'élément de progression sont tous teintés en rose vif.
Démo

Éléments acceptés

Actuellement, seules quatre éléments peuvent être teintés via la propriété accent-color : checkbox, radio, range et progress. Vous pouvez prévisualiser chacun d'eux sur https://accent-color.glitch.me dans les jeux de couleurs clairs et foncés.

Case à cocher

Radio

Plage

Progression

Garantir le contraste

Pour éviter l'existence d'éléments inaccessibles, les navigateurs avec accent-color doivent déterminer une couleur de contraste éligible à utiliser avec l'accentuation personnalisée. Vous trouverez ci-dessous une capture d'écran montrant les différences entre les algorithmes de Chrome 94 (à gauche) et de Firefox 92 Nightly (à droite) :

Capture d'écran de Firefox et Chromium côte à côte, affichant un spectre complet de cases à cocher dans différentes teintes et luminosités.

Le plus important à retenir, c'est de faire confiance au navigateur. Fournissez une couleur de marque et faites confiance à l'IA pour prendre les bonnes décisions à votre place.

Extra : plus de teinte

Vous vous demandez peut-être comment teinter plus de quatre éléments de formulaire. Voici un bac à sable minimal qui teinte :

  • la bague de mise au point.
  • les éléments mis en surbrillance lors de la sélection de texte ;
  • Marqueurs de liste
  • Indicateurs en forme de flèche (Webkit uniquement)
  • Curseur de la barre de défilement (Firefox uniquement)
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Avenir potentiel

La spécification ne limite pas l'application de accent-color aux quatre éléments présentés dans cet article. D'autres éléments pourront être ajoutés ultérieurement. Les éléments tels que le <option> sélectionné dans un <select> peuvent être mis en évidence avec accent-color.

Quels autres éléments Web souhaitez-vous teinter ? Tweetez @argyleink avec votre sélecteur. Il sera peut-être ajouté à cet article.