Apportez la couleur de votre marque dans les formulaires HTML intégrés à l'aide d'une seule ligne de code.
Les éléments de formulaire HTML actuels sont difficiles à personnaliser. C'est comme s'il s'agissait de choisir entre peu ou pas de styles personnalisés, ou de réinitialiser les styles de saisie et de les créer à partir de zéro. Le construire à partir de zéro finit par demander beaucoup plus de travail que prévu. Cela peut également entraîner des styles oubliés pour les états d'élément (indéterminé, lorsque je vous regarde) et la perte des fonctionnalités d'accessibilité intégrées. Recréer entièrement ce que fournit le navigateur peut représenter plus de travail que prévu.
accent-color: hotpink;
Le CSS accent-color de la spécification de l'UI CSS est ici pour colorer les éléments avec une seule ligne de CSS, ce qui vous évite d'avoir à les personnaliser en fournissant un moyen d'intégrer votre marque dans les éléments.
La propriété accent-color fonctionne également avec color-scheme, ce qui permet aux auteurs d'appliquer une teinte aux éléments clairs et sombres.
Dans l'exemple suivant, l'utilisateur a un thème sombre actif. La page utilise color-scheme: light dark et le même accent-color: hotpink pour les commandes teintées du thème sombre.
Éléments compatibles
Actuellement, seuls quatre éléments se colorent via la propriété accent-color : case à cocher, radio, plage et progression. Chacun peut être prévisualisé ici https://accent-color.glitch.me avec des jeux de couleurs clairs et sombres.
Case à cocher
Radio
Plage
Progression
Garantir le contraste
Pour éviter que des éléments existants ne soient inaccessibles, les navigateurs avec accent-color doivent déterminer une couleur de contraste éligible à utiliser avec l'accentuation personnalisée. La capture d'écran ci-dessous montre les différences entre les algorithmes de Chrome 94 (à gauche) et de Firefox 92 Nightly (à droite) :
Il est essentiel de faire confiance au navigateur. Choisissez une couleur de marque et soyez sûr qu'elle prendra des décisions éclairées à votre place.
Extra: Plus de teintes
Vous vous demandez peut-être comment teinter plus de ces quatre éléments de formulaire ? Voici un exemple de bac à sable minimal de couleur:
- l'anneau de mise au point
- Sélection de texte en surbrillance
- Lister les repères
- Indicateurs de flèche (Webkit uniquement)
- curseur 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);
}
Futur potentiel
La spécification ne limite pas l'application de accent-color aux quatre éléments présentés dans cet article. D'autres fonctionnalités pourraient être ajoutées ultérieurement. Les éléments tels que <option> sélectionné dans une <select> peuvent être mis en surbrillance avec accent-color.
Qu'aimez-vous teinter d'autre sur le Web ? Envoyez un tweet à @argyleink avec votre sélecteur afin qu'il soit ajouté à cet article.