<select> personnalisable et <selectedcontent>

Définition

Depuis Chrome 135 (annonce du 24 mars 2025), appearance: base-select sur select et ::picker(select) rend la liste déroulante entièrement stylable ; les <option> acceptent du HTML riche (images, SVG). <selectedcontent>, unique enfant d'un <button> placé en tête du <select>, affiche un clone de l'option choisie. Disponibilité limitée, non Baseline ; repli automatique sur le select natif.

Analogie

Une vitrine de pâtisserie à la place d'un menu texte : on voit ce qu'on choisit.

Exemple de code

<select>
  <button><selectedcontent></selectedcontent></button>
  <option><img src="fr.svg" alt=""> Français</option>
  <option><img src="en.svg" alt=""> English</option>
</select>
<style>
  select, ::picker(select) { appearance: base-select; }
  select::picker-icon { transition: rotate .3s; }
  select:open::picker-icon { rotate: 180deg; }
  selectedcontent img { display: none; }
</style>

Cas d'usage

Sélecteurs de langue, de statut ou d'avatar accessibles et natifs, sans bibliothèque de « custom select » en JavaScript.

Anti-pattern

Mettre à jour dynamiquement le contenu d'une option déjà sélectionnée sans rafraîchir <selectedcontent> : le clone n'est refait qu'au changement.

Termes liés

Dans l'actu

17/09 WebKit détaille Safari 27.0 : 83 nouveautés et 844 corrections, dont le <select> entièrement stylable via appearance: base-select (avec ::picker-icon), le scroll anchoring, l'élément <model> pour la 3D sur iOS/iPadOS/macOS, et un… Semaine 38 · 14 – 20 septembre 2026 →