Comme convenu il y a 3 ans (hum…) voici un petit tuto pour personnaliser en CSS (et sans javascript) les menus déroulants des formulaires, l’élément select
.
Un peu de code HTML
Tout d’abord voyons comment écrire le code. Il va falloir encapsuler le select dans un conteneur, plutôt deux en fait : le premier .formfield-select
contiendra le label et le conteneur du select, le second .formfield-select--container
contiendra le select.
Voici le code complet :
On n’oubliera pas l’attribut for
sur le label pour le lier à l’ID du select.
Et un peu de CSS
Au niveau du CSS nous allons tout d’abord définir les deux conteneurs :
Ensuite, nous allons supprimer les styles par défaut du select à l’aide de la propriété appearance: none
, mais aussi le faire dépasser du conteneur afin de masquer les icones flèches natives (pour les navigateurs qui ne prennent pas en charge la propriété précédente.
Et enfin, nous allons ajouter une icone de pointeur à la place des icones natives. Nous allons styler le pseudo-element ::after
du conteneur pour créer un petit triangle.
Et voilà, notre select est personnalisé sans une once de javascript 🙂 L’autre avantage de cette technique est que ce select reste parfaitement accessible.

J’utilise cette technique dans mon starter theme WordPress : From Scratch, disponible sur Github. Ce petit tuto vient enfin compléter celui sur les checkbox et boutons radio personnalisés en CSS (même si une petite mise à jour serait bienvenue, pour créer les éléments graphiques sans image, uniquement à l’aide des pseudo-elements).
Télécharger les fichiers sources
Salut,
Attention car tu sembles partir du principe que la flèche est située à droite sur tout `select`. (cf. le `width: 110%;` que tu utilises pour la cacher).
Certaines langues se lisent pourtant de droite à gauche, auquel cas la flèche ne se situera guère à droite. Dans ce cas précis, ta technique donnerait un résultat différent de ce que tu expliques ici pour nous autres FR, et faux.
Néanmoins je ne pense pas qu’il y ait de technique miracle qui couvre correctement ce sujet. Peut-être qu’il y aurait moyen de détecter la langue et de nuancer la tienne ?
Bien cdt,
Hello,
Oui, pour détecter les langues tu as des attributs à appliquer à la balise HTML : `lang`, `dir`…
Pour l’exemple que tu donnes, une langue qui se lit de droite à gauche, tu ajoutes l’attribut `dir` avec comme valeur RTL (right to left) : dir=’rtl’
Ensuite en CSS tu peux alors inverser le placement de la flèche en fonction de cet attribut 🙂
Merci de partager ton savoir.
Cependant une question me taraude : en tant que mec qui gère en html css, pourquoi avoir fait un truc moche dur à lire sans scroller les parties de ‘code’ ?
Mais sincèrement, merci (pas d’ironie malgré ma remarque de c*****d)
Hello, de rien. Oui c’est vrai que les aperçus de code sont pas top… c’est ça de faire le malin avec un site boxé en 640 pixels de largeur ^^ Faudrait que j’essaye Codepen la prochaine fois. Là, le mieux c’est encore d’aller sur la page démo et d’inspecter le code avec le navigateur 🙂
Merci pour ce partage, vous venez de me faire gagner un temps précieux.
Mais de rien, ça fait plaisir 🙂
Le site web n’utilise peut-être même pas 30% de la largeur disponible ! Pénible à scroller pour avoir les infos… qui restent toutefois très utiles.
Une nouvelle version est prévue (depuis longtemps) … la faible largeur cependant c’était un choix 🙂
Bonjour,
Avez-vous des solutions pour la modification de l’apparence du menu déroulant des attributs – déclinaisons des produits sous Prestashop 1.6.1.6 ? Le but est de modifier la hauteur des champs select ainsi que de supprimer le cadre noir qui entoure les champs parcourus.
Quels sont les fichiers qui gèrent ça ?
Par avance merci,
Bonjour, je n’ai travaillé que 2 fois avec Prestashop et les 2 fois ce fut un calvaire… je ne saurais pas quoi te conseiller. Si les sélecteurs ne sont pas générés par du JS alors tu dois pouvoir écraser certaines règles CSS pour faire passer le style que tu veux. Maintenant, l’astuce de cet article de fonctionne que si le markup HTML est similaire ou si tu peux le modifier !
Au top ! Tu m’a fait gagné un temps précieux.
Par contre j’ai pu relevé une petite erreurs de frappe dans le code que tu fourni :
« ::after » en « :after »
j’ai du passer « background-color: #fff; » dans le « .formfield-select–container select » pour que mon select soit a fond blanc.
merci pour le tuto.
Et j’ai une petite question (autres) : Comemnt tu met le fondu/ degradé en haut de ton site, des qu’on commence a scrollé vers le bas ?
Merci par avance
De rien 😀
Pour les pseudo-elements ::before, ::after, ::first-letter… on utilise deux fois deux points (::) pour les différencier des pseudo-classes :hover, :active… 🙂
Ah et pour les dégradés sur le site, je détecte en JS quand on commence à scroller et quand on est en bas de l’écran, j’ajoute alors une classe sur la div wrapper qui affiche les dégradés sur des ::after/::before 🙂
merci