Donner du style aux listes déroulantes a toujours été compliqué. L'élément
<select> est un de ceux qui vous donnent envie de vous arracher ce qu'il vous reste de cheveux s'il vous prend l'envie de le styliser. Comme vous le savez, peu de règles CSS s'appliquant à cet élément à part des styles comme
color,
background,
font ou
border.
Dans cet article, plutôt que d'essayer d'appliquer des styles à l'élément HTML
<select>, nous allons utiliser une autre approche basée sur des techniques récemment implémentées comme
@supports,
pointer-events et
appearance.
Partager