L’élément `selectlist`

L’élément <select> est l’un des seuls contrôles de formulaire dont l’apparence ne peut pas être mise en forme. Toute règle CSS qui lui est appliquée, comme des bordures, des polices ou des styles d’options personnalisés, est ignorée par le navigateur. Cela a conduit à la création de milliers de bibliothèques de listes déroulantes personnalisées qui reproduisent le comportement natif uniquement pour pouvoir mettre en forme les options.

<selectlist>, également appelé <selectmenu>, est un élément HTML natif conçu comme remplacement personnalisable de <select>. Il reprend le même modèle conceptuel, avec un bouton déclencheur et une liste d’options, mais chaque partie peut être personnalisée avec CSS.

selectlist expose le bouton, qui sert de déclencheur lorsque la liste est fermée, la liste de choix, qui correspond à la liste déroulante ouverte, et les options. Les pseudo-éléments CSS (::part(button), ::part(listbox)) permettent de mettre chacun en forme sans modifier le comportement natif.

Les options de selectlist peuvent contenir un contenu arbitraire, comme des icônes, des descriptions ou des mises en page personnalisées, et pas seulement du texte. Le navigateur gère toujours la logique de sélection, la navigation au clavier et la gestion du focus, tandis que vous contrôlez librement l’apparence.

selectlist conserve tous les points forts de <select> : navigation au clavier, avec les flèches et la recherche par saisie, annonces des lecteurs d’écran, participation aux formulaires et gestion du focus. Vous bénéficiez du comportement accessible et pouvez personnaliser l’interface par-dessus.

Fournissez un emplacement pour le déclencheur : <button slot="button">Choose fruit <svg>...</svg></button>. Le bouton est entièrement personnalisable : remplacez le triangle natif par une icône personnalisée, ajoutez des libellés et modifiez les couleurs. Le navigateur gère toujours l’ouverture et la fermeture.

selectlist participe à la soumission des formulaires comme select : il possède un attribut name et une valeur, puis est envoyé avec le formulaire. Le traitement côté serveur est identique. Il constitue un remplacement direct au niveau du balisage pour la plupart des cas d’utilisation de select.

selectlist est une fonctionnalité à un stade précoce. En 2026, elle est disponible dans les navigateurs fondés sur Chromium derrière des indicateurs ou sous une forme limitée. Firefox et Safari ne la prennent pas encore en charge. Son utilisation en production nécessite une solution de repli vers un <select> classique pour les navigateurs non compatibles.

Créer une couche de compatibilité pour une liste déroulante personnalisée entièrement accessible et correspondant au comportement natif est difficile : confinement du focus, navigation au clavier, intégration aux lecteurs d’écran et participation aux formulaires. Des bibliothèques comme Downshift, Combobox et react-aria prennent en charge ce travail au prix de milliers de lignes de code. selectlist remplace tout cela par un seul élément.

Pour les applications internes ou les déploiements réservés à Chromium, selectlist permet aujourd’hui d’économiser beaucoup de code. Pour les sites publics destinés à un large public, attendez la prise en charge par Firefox et Safari, ou utilisez une bibliothèque d’enrobage qui s’appuie sur selectlist lorsqu’il est pris en charge et utilise ailleurs une liste déroulante personnalisée React/Vue.

Une fois que selectlist sera disponible partout, attendez-vous à voir de nombreuses bibliothèques de listes déroulantes personnalisées être abandonnées ou devenir de simples enveloppes autour de l’élément natif. Surveillez le processus de normalisation : l’API a fait l’objet de plusieurs révisions et pourrait continuer à évoluer avant sa normalisation définitive.

Les concepteurs peuvent désormais spécifier des listes déroulantes parfaitement conformes aux maquettes, sans la réserve « Voici la conception, mais la liste déroulante aura un aspect différent dans le navigateur ». selectlist élimine l’une des incohérences visuelles les plus anciennes entre les maquettes et le HTML livré.

Pourquoi l’élément selectlist est-il important ? Quelle limitation de <select> résout-il ?

selectlist (également appelé selectmenu) est un nouvel élément HTML natif en cours d’émergence, qui associe le comportement intégré de <select> (clavier, lecteur d’écran et participation aux formulaires) à une personnalisation CSS complète du bouton, de la zone de liste et des options. Il est actuellement disponible dans Chromium derrière des indicateurs. Une fois normalisé partout, il remplacera une grande partie de l’écosystème des bibliothèques de listes déroulantes personnalisées par un seul élément natif de base.