Programmez un appel

Personnaliser le select en css : c’est enfin possible !

marconte

marconte

2/04/2025

Personnaliser le select en CSS est enfin possible ! Plus besoin d’utiliser des librairies JavaScript pour avoir un menu déroulant qui colle à votre design. Pour l’instant, cette fonctionnalité est uniquement disponible pour les navigateurs basés sur Chromium (à partir de la version 135), mais on espère que les autres navigateurs suivront.

Fonctionnement

La première étape consiste à demander au navigateur de modifier le style du select afin qu’il n’utilise plus le select de base, mais le select implémenté par le navigateur.

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

Avec ce style, le select change d’apparence. Il passe d’un look “système” à un look “navigateur” minimaliste, prêt à être stylisé.

Styliser le bouton Select

Voici les éléments clés qu’il est possible de sélectionner pour le style :

select {
  /* Style du bouton select */
}

select::picker-icon {
  /* Pseudo élément représentant la flèche */
}

select::picker(select) {
 /* Menu déroulant */
}

option::checkmark {
 /* Coche à gauche des options */
}
CSS

HTML dans les options

Il est désormais possible d’insérer du HTML directement dans les balises <option> !

Exemple :

<select>
  <option value="1">
      <img src="/avatar-bastien.jpg" alt="" width="20" height="20" />
       Bastien
  </option>
  
   <option value="2"><br>   
      <img src="/avatar-alice.jpg" alt="" width="20" height="20" />
      Alice
    </option>
</select>
HTML

Bouton personnalisé

Si vous sélectionnez une option avec du HTML (comme notre avatar), le bouton select n’affichera que le contenu textuel par défaut. Pour améliorer cela, il est possible de mettre un <button> comme premier enfant du <select>, et d’utiliser une balise spéciale <selectedcontent> qui reprendra automatiquement le contenu de l’option sélectionnée.

<select>
<!-- Ce bouton sera affiché à la place du contenu par défaut du select -->
  <button>
    <!-- Prendra le contenu HTML de l'option choisie -->
    <selectedcontent></selectedcontent>
    <svg><!-- ... icône flèche ... --></svg>
  </button>
  
  <!-- Ensuite nos options -->
  <option value="1">
    <img src="/avatar-bastien.jpg" alt="" width="20" height="20" />
    Bastien
  </option>
  <option value="2">
    <img src="/avatar-alice.jpg" alt="" width="20" height="20" />
    Alice
  </option>
</select>
HTML

Positionnement

Le menu déroulant se positionne automatiquement, mais il est possible de choisir son emplacement à l’aide du système d’ancrage CSS.

select::picker(select) {
  /* On positionne le menu sur la droite de notre select */
  top: anchor(top);
  left: anchor(right);
}
CSS

Animations

Il est également possible d’ajouter des animations pour le déploiement du menu déroulant.

select::picker(select) {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s allow-discrete;
}

select::picker(select):popover-open {
  transform: translateY(0px);
  opacity: 1;
  @starting-style {
    opacity: 0;
    transform: translateY(-10px);
  }
}
CSS

Compatibilité avec les autres navigateurs

Cette nouveauté est une amélioration progressive. Les navigateurs qui ne comprennent pas appearance: base-select, ::picker(select) ou le HTML dans les options ignoreront simplement tout cela et afficheront le bon vieux select natif standard. Le contenu HTML dans les <option> sera ignoré, seul le texte sera pris en compte.

Limitations

Cette nouvelle option de style permettra de se passer de librairies JavaScript pour de nombreux cas, mais il y a quelques points à prendre en compte :

  • Il n’est pas possible de mettre un champ dans le select (bloquant pour créer un autocomplete par exemple).
  • Sur mobile, l’apparence base-select désactive le sélecteur natif pour notre menu déroulant, donc à voir ce que ça donne niveau accessibilité.

Conclusion

La possibilité de styliser les selects nativement est une fonctionnalité attendue depuis des années. Ce changement permettra enfin de créer des interfaces plus cohérentes et esthétiques sans alourdir nos pages avec du JavaScript. De plus, le navigateur gère toute la partie accessibilité (navigation clavier, etc.), ce qui est un énorme avantage.

Sources:

  1. https://una.im/select-updates/
  2. https://grafikart.fr/tutoriels/select-css-appearance-2284

Articles similaires