Chrome a d'abord livré des éléments de sélection personnalisables, et à partir de Safari 27.1, le 23 octobre, Apple s'est joint à nous. Apparence d'écriture : la sélection de base dans votre CSS transforme la liste déroulante native en HTML que vous pouvez réellement styliser, tout en conservant le comportement natif du clavier, des lecteurs d'écran et de tout ce qui a rendu la sélection difficile en premier lieu.
L'histoire du support aujourd'hui
caniuse data place la personnalisation de select dans 69,98 % des navigateurs : Chrome, Safari et leurs dérivés la proposent, Firefox ne le fait pas encore. Il s’agit d’une fonctionnalité dégradante et non brisée. Les utilisateurs de Firefox bénéficient d'une liste déroulante native simple et parfaitement fonctionnelle.
Ce que tu peux faire maintenant que tu ne pouvais pas
- Couleurs, bordures et états réels dans la liste contextuelle, sans bibliothèque déroulante.
- Une option affichant une petite icône à côté de son étiquette.
- L'argument toujours fort en faveur de la sémantique native : la gestion des entrées, le focus, le contrôle vocal restent entre les mains du navigateur, pas celles de la bibliothèque.
Une bonne amélioration progressive consiste à styliser ce que le navigateur a déjà rendu accessible. C'est très gentil.
Firefox ne l'a pas encore livré, donc si votre conception ne survit pas à une solution de repli, conservez l'apparence par défaut jusqu'à ce que ce soit le cas. Une petite fonctionnalité, utile à environ sept lecteurs sur dix.