Personnaliser une liste “select” en CSS sans JavaScript, la nouveauté 2026

Le CSS moderne est désormais suffisamment puissant pour gérer des animations complexes et des interactions utilisateur qui nécessitaient auparavant des scripts personnalisés. Dans cet article, nous allons explorer une des dernières fonctionnalités disponibles avec CSS et voir comment elle peut simplifier ton workflow et les performances de tes sites.

Imagine un monde où tu peux créer des éléments <select> entièrement personnalisables sans écrire une ligne de JavaScript. C'est exactement ce qui devient possible avec ces nouvelles fonctionnalités CSS 2026, et c'est une évolution qu'on était impatient de voir arriver !

Personnalisation du sélecteur HTML natif

C'est une fonctionnalité que j'attendais sincèrement depuis des années, voyons donc comment elle fonctionne dans la pratique. L'élément <select> est la solution intégrée au navigateur pour créer un menu déroulant accessible, mais ses possibilités de personnalisation ont toujours été limitées.

Si tu voulais quelque chose de plus avancé que d'ajuster le remplissage ou de changer les couleurs, tu devais généralement créer un menu déroulant entièrement personnalisé avec un balisage supplémentaire, des gestionnaires JavaScript et toute la complexité qui accompagne la tentative d'imiter le comportement natif.

Les sélecteurs personnalisables te permettent maintenant de combiner le meilleur des deux mondes : l'accessibilité native et la sémantique d'un véritable <select> avec une personnalisation avancée du style sans aucun code JavaScript !

Dans la démo ci-dessous, j'utilise 2 nouvelles fonctionnalités CSS pour créer un sélecteur One Piece qui :

• Utilise le <select> natif pour la sémantique et l'accessibilité
• Affiche une icône et une couleur d'arrière-plan pour chaque option

Note : cette fonctionnalité requiert Chrome 135+ ou Edge 135+

See the Pen Personnaliser le select HTML en pure CSS by Tibow (@Tibow) on CodePen.

Tout cela est réalisé à l'aide d'un seul élément <select> et de quelques attributs data-*. L'interactivité provient des fonctionnalités suivantes : apparence : base-select (plus le select picker) et attributs attr().

Compatibilité avec les navigateurs modernes

Une compatibilité élargie à Safari et Firefox est attendue dans le courant de cette année 2026. Pour l'heure, cette nouvelle fonctionnalité est à utiliser avec parcimonie car uniquement compatible Chrome et Edge 135 et plus.

appearance: base-select et le select picker

La première étape consiste à passer le contrôle en mode personnalisable :

select,
select::picker(select) {
  appearance: base-select;
}

appearance: base-select permet de rendre personnalisable l'apparence du volet déroulant.
Les navigateurs qui ne le prennent pas en charge ignoreront simplement la propriété et afficheront le menu déroulant normalement.

Une fois que tu as opté pour cette solution, le pseudo-élément ::picker(select) représente le rendu de la liste déroulante que tu peux donc styliser librement.

select::picker(select) {
  margin-block-end: 1em;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

Grâce aux select personnalisables, le navigateur gère pour toi une grande partie de la complexité des listes déroulantes, notamment :

• Gestion automatique des débordements : si le menu déroulant est plus haut que l'espace disponible, le navigateur gère le débordement pour toi. Cela inclut la limitation de la hauteur du sélecteur et la possibilité de le faire défiler si nécessaire, plutôt que de le laisser déborder de l'écran ou de t'obliger à calculer manuellement les hauteurs.
• Positionnement automatique de l'affichage du menu déroulant : le menu déroulant choisit automatiquement le meilleur emplacement pour s'afficher (haut ou bas), en fonction de l'espace disponible dans la fenêtre d'affichage.
• Gestion intégrée du focus : le comportement du focus est géré de manière native. Lorsque la sélection s'ouvre, le focus se déplace vers le sélecteur de manière prévisible. Et lorsqu'elle se ferme, le focus revient correctement.
• Navigation complète au clavier (touches fléches, Entrée, Échap) : les utilisateurs peuvent naviguer parmi les options à l'aide des touches du clavier, confirmer une sélection avec la touche Entrée et fermer le sélecteur avec la touche Échap, comme avec un élément normal.
• Prise en charge d'un contenu d'option plus riche : tu peux inclure plus que du texte brut dans chaque élément, comme des icônes, des étiquettes supplémentaires ou du contenu structuré.

Ce sont des éléments que tu devrais normalement créer manuellement en JavaScript pour concevoir un menu déroulant personnalisé, mais ici, tout est géré nativement en CSS.

Un autre avantage majeur est le modèle d'amélioration progressive intégré. Si un navigateur ne prend pas encore en charge les sélections personnalisables, l'utilisateur obtient simplement l'élément <select> natif standard. Rien ne se casse et il n'est pas nécessaire de maintenir deux versions du composant.

Fonction attr() avancée pour un style selon des données du HTML

Enfin, la démo utilise la fonction attr() pour conserver les détails visuels déclarés dans les attributs data-*.

La fonction attr() est disponible depuis un certain temps déjà. Mais jusqu'à récemment, elle n'était fiable que pour la propriété content.

//HTML
<option data-bg-color="#F8C9A0" value="chopper">

//CSS
option {
  background-color: attr(data-bg-color color, transparent);
}

Avec la nouvelle version typée de attr(), on peut commencer à utiliser les valeurs d'attribut dans davantage d'endroits dans le CSS, à condition d'indiquer au navigateur le type attendu.

Dans cette démo, chaque option comprend un attribut data-bg-color qui définit la couleur d'arrière-plan au survol, et nous lisons cette valeur directement dans le CSS, terriblement efficace !

Comme nous traitons explicitement l'attribut comme une couleur, le navigateur l'analyse correctement et fourni en toute sécurité une valeur de repli si l'attribut est manquant. Ça nous ouvre les portes d'une stylisation davantage axée sur les données : tu peux modifier les couleurs du thème dans le code HTML sans toucher au CSS.

En conclusion

Réunis : base-select, le select picker et attr() permettent de créer un menu déroulant plus riche et qui reste fondamentalement un véritable élément <select>. Tu peux le personnaliser à souhait sans craindre de perdre le comportement natif et les fonctionnalités d'accessibilité intégrées.

Cette démo montre l'aspect le plus passionnant de l'évolution du CSS : remplacer plus de 150 lignes de JavaScript par seulement quelques fonctionnalités CSS est vraiment incroyable.