Styliser les éléments Select avec CSS moderne

L’élément <select> a toujours été l’un des contrôles de formulaire les plus récalcitrants à styliser. Contrairement aux inputs ou aux boutons, il s’affichait historiquement en utilisant des composants d’interface au niveau du système d’exploitation, ce qui signifie que CSS ne pouvait qu’effleurer la surface. Cette limitation a poussé les développeurs vers des solutions de contournement qui restent courantes dans le code de production aujourd’hui.

Cet article couvre les deux approches : la technique héritée largement supportée utilisant appearance: none, et le modèle plus récent appearance: base-select actuellement en émergence dans les navigateurs Chromium modernes.

Pourquoi les éléments natifs <select> résistent au stylage CSS

Les navigateurs confiaient traditionnellement le rendu des <select> au système d’exploitation. Le résultat était un dimensionnement de boîte, un rendu de police et des styles de flèche déroulante incohérents entre Chrome, Firefox, Safari et Edge, sans moyen fiable de les unifier uniquement avec CSS.

La liste déroulante ouverte (le panneau d’options) reste largement non stylisable dans la plupart des navigateurs encore aujourd’hui. C’est une contrainte forte à garder à l’esprit avant de choisir votre approche.

L’approche héritée : appearance: none avec un élément conteneur

La technique de stylage CSS la plus largement supportée pour les éléments select implique trois étapes :

1. Supprimer l’apparence native avec appearance: none.
2. Envelopper le <select> dans un élément conteneur que vous pouvez styliser librement.
3. Ajouter une flèche déroulante personnalisée en utilisant clip-path ou un SVG en arrière-plan.

:root {
  --select-border: #777;
  --select-arrow: var(--select-border);
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  background-color: #fff;
}

select,
.select::after {
  grid-area: select;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  pointer-events: none;
}

L’astuce de superposition CSS grid ici mérite d’être comprise : en assignant à la fois le <select> et le pseudo-élément ::after à la même zone de grille nommée, on les empile, permettant à la flèche personnalisée de se positionner visuellement au-dessus sans casser le comportement de clic du contrôle natif.

Pour les états de focus, puisque outline sur le select natif ne se comporte pas de manière fiable d’un navigateur à l’autre, une solution courante consiste à ajouter un élément frère <span class="focus"> et à le cibler avec select:focus + .focus en utilisant position: absolute pour dessiner un anneau de focus visible.

Cette approche fonctionne sur tous les navigateurs modernes et préserve l’accessibilité native — la navigation au clavier, les annonces de lecteur d’écran et la soumission de formulaire se comportent tous comme prévu.

L’approche moderne : appearance: base-select

Chrome 135 et Edge 135 ont introduit un nouveau modèle opt-in qui expose les parties internes du <select> pour un stylage CSS direct. Vous l’activez comme ceci :

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

Cela déverrouille plusieurs nouvelles cibles de stylage :

• ::picker(select) — le panneau déroulant contenant les options
• ::picker-icon — l’indicateur de flèche déroulante
• option::checkmark — la coche affichée à côté de l’option sélectionnée
• :open — une pseudo-classe active pendant que le picker est ouvert
• option:checked — cible l’option actuellement sélectionnée

Avec base-select, vous pouvez styliser directement le dropdown picker, l’animer à l’ouverture et à la fermeture, et utiliser l’élément <selectedcontent> pour refléter le contenu de l’option sélectionnée dans le contrôle fermé. Les navigateurs supportant cette fonctionnalité permettent également un balisage plus riche à l’intérieur des options lorsque le modèle de select personnalisable est activé.

Support navigateur : actuellement limité principalement aux navigateurs basés sur Chromium. Vérifiez le statut actuel sur Can I Use.

Utilisez @supports pour l’appliquer comme amélioration progressive :

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

Quelle approche devriez-vous utiliser ?

Utilisez la technique du conteneur avec appearance: none comme base de référence. Elle fonctionne partout, préserve l’accessibilité et vous donne un contrôle solide sur l’état fermé du select. Superposez appearance: base-select par-dessus avec @supports pour les navigateurs qui le supportent.

Conclusion

Personnaliser les menus déroulants HTML select avec CSS n’est plus un choix entre « contrôle total avec JavaScript » ou « accepter les paramètres par défaut du navigateur ». Le pattern de conteneur appearance: none reste la fondation cross-browser fiable, tandis que appearance: base-select ouvre la porte au stylage du panneau déroulant, à l’intégration de contenu plus riche dans les options et à l’animation du picker. L’écart entre ces deux extrêmes se réduit, mais pas encore uniformément sur tous les navigateurs. Commencez par la technique héritée, superposez progressivement la moderne, et vous couvrirez le plus large éventail d’utilisateurs avec le moins de friction.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..