Customizable select : enfin styler le vrai <select>

Aller au-delà de l’élément select par défaut imposait jusqu’ici l’un de deux mauvais compromis : de lourdes bibliothèques JavaScript ou des piles d’éléments div, l’accessibilité devenant délicate dans les deux cas.¹ À la WWDC 2026, l’équipe Safari a montré la sortie de cette impasse : customizable select, un ensemble d’ajouts à HTML et CSS qui rend l’élément <select> préexistant entièrement stylable tout en conservant la sémantique, la navigation au clavier et la prise en charge des lecteurs d’écran qu’il offre déjà. À partir de Safari 27 et Chrome 135, vous pouvez restyler le bouton, le menu déroulant, la coche et même la flèche, puis placer des images, des vidéos ou des émojis à l’intérieur de vos options.¹

TL;DR

• Customizable select stylise le véritable élément <select> avec HTML et CSS seuls, remplaçant les bibliothèques JavaScript et les empilements de div vers lesquels les développeurs se tournaient auparavant. La disponibilité commence avec Safari 27 et Chrome 135.¹
• L’activation passe par appearance: base-select, appliqué deux fois : une première sur le select lui-même pour ouvrir le style du bouton, et une seconde sur ::picker(select) pour renoncer au menu déroulant natif.¹
• De nouvelles parties stylables l’accompagnent : ::picker-icon restyle la flèche via la propriété content et une width, ::checkmark sur l’élément option remplace la coche de la même manière, et la pseudo-classe :open stylise le bouton pendant que le menu est ouvert.¹
• Les options acceptent tout type de contenu : images, vidéos, émojis. La démonstration de la session place un SVG et un libellé dans chaque option, puis dispose tout le menu déroulant en grille CSS avec grid-template et gap.¹
• Placer un <button> comme premier enfant de <select>, ce qui n’était auparavant pas autorisé en HTML, remplace le bouton intégré ; l’élément <selectedcontent> qu’il contient affiche le contenu riche de l’option sélectionnée.²
• L’amélioration progressive est offerte d’office : les navigateurs sans prise en charge retombent sur la fenêtre contextuelle native, et l’élément select sémantique conserve partout son accessibilité intégrée.¹

De la soupe de div au retour vers un HTML sémantique

Tim, ingénieur Safari, applique appearance: base-select à une démo de portfolio de photographe à partir de 2:48.

Le cadrage de la session part de ce que <select> fait déjà bien. L’élément offre une accessibilité de base sans rien installer : navigation au clavier entre les éléments option et comportement solide avec les lecteurs d’écran, le tout sans bibliothèques externes.¹ Sur les plateformes Apple, le rendu natif est le familier bouton déroulant, et il s’accorde à tous les autres contrôles de la plateforme, ce qui offre aux utilisateurs une façon connue de naviguer.¹

Le hic a toujours été le design. Posez le contrôle natif sur un site stylé et il détonne ; il refuse de se fondre dans le décor. Jusqu’ici, le remède consistait à abandonner complètement l’élément au profit d’un widget JavaScript ou d’un tas de div, puis à reconstruire l’accessibilité à la main. Customizable select conserve l’élément et vous remet le style, en trois étapes que la session parcourt sur une véritable construction de portfolio de photographe : le bouton, le menu déroulant, et enfin un contenu qui dépasse le simple texte.¹

Styler le bouton : base-select, ::picker-icon et :open

Le bouton est la partie du select sur laquelle vous cliquez pour afficher le menu, et la première étape tient en une seule déclaration :

select {
  appearance: base-select;
}

appearance: base-select échange le rendu natif contre un plus petit ensemble de styles de base que vous pouvez modifier.¹ L’effet apparaît immédiatement par héritage : le site de démo définit font-family: Gill Sans sur le body, et le bouton du select hérite désormais de la police du body, s’accordant au libellé voisin.¹ À partir de là, l’arrière-plan, la bordure et le padding s’ajustent comme pour n’importe quel autre élément.

Deux nouveaux points d’accroche finalisent le bouton. La flèche obtient son propre sélecteur, ::picker-icon, qui prend une propriété content pour un glyphe de remplacement et une width pour le dimensionner. La pseudo-classe :open stylise le bouton différemment pendant que le menu déroulant est ouvert :

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

Le verdict de la session sur le résultat : un select assorti au reste du site en quelques lignes de CSS seulement.¹

Styler le menu déroulant : ::picker(select) et ::checkmark

Le menu apporte ses propres parties stylables. Vous adressez le menu déroulant lui-même avec ::picker(select) sur l’élément select, et la coche avec ::checkmark sur l’élément option.¹ Renoncer au menu natif exige appearance: base-select une deuxième fois, désormais sur le picker :

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

Avec cette page blanche en place, la démo organise les espacements avec du padding et de la marge, puis traite les bordures et une box-shadow sur le menu déroulant.¹ Pour mettre en avant le choix courant, on utilise le sélecteur préexistant :checked plutôt que quoi que ce soit de nouveau : mettre en gras l’option cochée, griser les autres.¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark fonctionne exactement comme ::picker-icon : définissez content et une width, et la coche par défaut devient le glyphe qui convient à votre design.¹

Du contenu riche dans les options, disposé en grille

Le plus grand changement, c’est ce qui se trouve à l’intérieur de <option>. La session est explicite : tout type de contenu fonctionne, images, vidéos, émojis, ce que vous voulez.¹ La démo construit un navigateur de catégories pour les sujets les plus populaires du photographe, avec un symbole SVG et un libellé dans chaque option :

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

Remarquez l’attribut alt vide. Tim laisse délibérément le texte alternatif de l’image vide, car le libellé « Flowers » serait sinon annoncé deux fois par les lecteurs d’écran.¹ Petit détail, conséquence réelle : les options riches restent aussi utilisables avec les technologies d’assistance que les options ordinaires.

La coche par défaut ayant été retirée, la démo met en évidence l’option sélectionnée par le sélecteur checked et des changements de couleur.¹ Un problème subsiste : les options à symbole et libellé rendent le menu déroulant très long. Le remède réutilise du CSS qui existe déjà, car le picker est désormais une cible de style ordinaire. Une mise en page en grille remodèle tout le menu :

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template définit le nombre de lignes et de colonnes, tandis que gap définit l’espacement entre les cellules de la grille, et le menu déroulant s’aligne en une grille organisée de catégories.¹ La session se termine sur une touche d’éclat dans le même esprit : un sélecteur de couleur radial, entièrement construit avec customizable select.¹

Le bouton interchangeable et selectedcontent

Une lacune subsiste dans le navigateur de catégories : les symboles SVG vivent dans les options, mais le bouton qui montre la sélection courante n’affiche que du texte.¹ Customizable select comble la lacune en vous permettant de remplacer le bouton intégré, en plaçant un élément <button> comme premier enfant du <select>. Mettre un bouton dans un select n’était auparavant pas autorisé en HTML ; il accepte désormais du contenu personnalisé, comme des libellés, ou comme l’élément conçu exactement pour cette tâche.¹

L’annonce de la bêta de Safari 27 par WebKit nomme cet élément : <selectedcontent>. Placé dans le bouton premier enfant du select, il affiche le contenu de l’option actuellement sélectionnée et peut être stylé directement.²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

L’élément reflète tout contenu riche appartenant à l’option sélectionnée, comme le SVG à côté du libellé « Everything » dans la démo, si bien que le bouton affiche enfin le même langage visuel que le menu qu’il ouvre.¹²

L’amélioration progressive est intégrée

La dernière étape de la session est celle que les équipes négligent à leurs dépens : vérifier le design dans les navigateurs qui ne prennent pas en charge customizable select. La réponse est ennuyeuse au meilleur sens du terme. L’amélioration progressive entre en jeu, le contrôle reste utilisable, et les clients obtiennent la fenêtre contextuelle native.¹ Réutiliser l’élément select signifie que le scénario de repli existe déjà, et parce que <select> est un élément sémantique, les fonctionnalités d’accessibilité intégrées survivent dans tous les navigateurs.¹

La disponibilité est concrète : Safari 27 et Chrome 135. Pour essayer ces fonctionnalités dès maintenant, téléchargez Safari Technology Preview ou Safari Beta.¹ Le conseil de clôture de la session est pratique : consultez la démo sur webkit.org, stylez quelque chose de simple sur votre propre site, testez dans des navigateurs sans prise en charge et avec des outils d’assistance, et lisez le matériel de bonnes pratiques de WebKit afin que l’interface fonctionne pour tout le monde.¹

Points clés à retenir

Pour les développeurs front-end : - Activez avec appearance: base-select sur l’élément select pour le bouton, puis de nouveau sur ::picker(select) pour le menu déroulant ; ensuite, stylez l’arrière-plan, la bordure, le padding, l’espacement et la box-shadow comme n’importe quel autre élément.¹ - Remplacez la flèche avec ::picker-icon et la coche avec ::checkmark, tous deux via content plus width ; stylez l’état ouvert avec :open ; mettez en avant la sélection avec le sélecteur préexistant :checked.¹ - Placez du vrai HTML dans <option> (images, vidéos, émojis) et remodelez le menu avec du CSS existant, comme une grille grid-template plus gap ; remplacez le bouton intégré par un <button> premier enfant contenant <selectedcontent>.¹²

Pour les équipes soucieuses de l’accessibilité : - Le select sémantique conserve la navigation au clavier et la prise en charge des lecteurs d’écran sans bibliothèques externes, dans les navigateurs pris en charge comme dans ceux qui ne le sont pas.¹ - Lorsque les options portent à la fois une image et un libellé texte, laissez le texte alternatif de l’image vide pour que les lecteurs d’écran n’annoncent pas le libellé deux fois.¹ - Testez avec des navigateurs sans prise en charge et avec des outils d’assistance avant la mise en production, conformément à la liste de contrôle de la session elle-même.¹

Pour les responsables techniques qui planifient le déploiement : - Traitez customizable select comme une amélioration progressive : Safari 27 et Chrome 135 obtiennent le design personnalisé, tous les autres obtiennent la fenêtre contextuelle native, et aucun repli JavaScript n’est requis.¹ - Évaluez-le dès maintenant dans Safari Technology Preview ou Safari Beta, et pesez-le face à la bibliothèque de menu déroulant qui occupe actuellement votre bundle.¹

FAQ

Qu’est-ce que customizable select ?

Customizable select est un ensemble de capacités HTML et CSS, introduit par l’équipe Safari à la WWDC 2026 et disponible à partir de Safari 27 et Chrome 135, qui rend l’élément <select> préexistant entièrement personnalisable. Vous stylez le bouton, le menu déroulant, la flèche et la coche avec du CSS, et vous placez du contenu riche dans les options, tout en conservant l’accessibilité intégrée de l’élément.¹

Comment activer customizable select ?

Appliquez appearance: base-select à deux endroits : sur l’élément select lui-même, ce qui remplace le rendu natif du bouton par un plus petit ensemble de styles de base, et sur ::picker(select), ce qui fait renoncer le menu déroulant à son rendu natif afin que vous puissiez le styler librement.¹

Puis-je placer des images ou d’autre HTML à l’intérieur des éléments option ?

Oui. La session indique que vous pouvez placer tout type de contenu dans les options : images, vidéos, émojis. La démo utilise un SVG et un libellé texte par option, avec un texte alternatif d’image vide pour que les lecteurs d’écran n’annoncent le libellé qu’une seule fois, et dispose le menu en grille CSS à l’aide de grid-template et gap.¹

Qu’est-ce que l’élément selectedcontent ?

<selectedcontent> est l’élément qui affiche le contenu riche de l’option actuellement sélectionnée à l’intérieur du bouton du select. Customizable select autorise un <button> comme premier enfant de <select>, ce qui n’était auparavant pas permis en HTML ; placer <selectedcontent> dans ce bouton reflète le contenu de l’option sélectionnée, comme un SVG à côté de son libellé, et l’élément peut être stylé directement.¹²

Que se passe-t-il dans les navigateurs qui ne prennent pas en charge customizable select ?

Le contrôle se dégrade en douceur. L’amélioration progressive signifie que le select reste pleinement utilisable et que les clients obtiennent la fenêtre contextuelle native, et parce que <select> est un élément sémantique, les fonctionnalités d’accessibilité intégrées subsistent. La session recommande de tester dans les navigateurs non pris en charge et avec des outils d’assistance avant la mise en production.¹

Customizable select supprime une dépendance de la même façon que CSS Grid Lanes le fait pour les mises en page en maçonnerie, et l’association est délibérée : la session 315 elle-même se clôt en orientant les spectateurs vers la session Grid Lanes, et le site de démo utilise les deux fonctionnalités ensemble.¹ Apple ne cesse d’étendre ce que les simples éléments HTML peuvent faire, la même trajectoire que celle couverte dans l’élément model de HTML sur les plateformes Apple, et chaque bibliothèque de menu déroulant que vous n’expédiez plus renforce l’argumentaire du manifeste no-build. Le hub complet de la série est la série Apple Ecosystem.

References