Des select personnalisés en CSS

custom select en css

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 :

<div class="formfield-select">
	
	<label for="mon_select" >Choisir un truc</label>
	
	<div class="formfield-select--container">
		
		<select id="mon_select">
			<option>Faire des travaux</option>
			<option>Cuisiner des légumes</option>
			<option>Tondre la pelouse</option>
			<option>Manger des nouilles</option>
			<option>Se lever tard</option>
			<option>Trouver l’ouverture facile</option>
		</select>

	</div>
	
</div>

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 :

.formfield-select {
	position: relative;
}

.formfield-select--container {
	position: relative; 
	
	background-color: #fff;
	border: #777 1px solid;
	margin: 0 0 1.5em 0;
	
	overflow: hidden; 
	/* 
		Le select natif pourra 
		dépasser sans être vu 
	*/
}

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.

.formfield-select--container select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: 110%; 
	/* 
		On est sûr de ne plus voir
		la flèche native 
	*/
	
	height: auto;
	border: 0; 
	margin: 0;
	padding: .75em;
	border-radius: 0;
	

	overflow: hidden;
	text-overflow: ellipsis;
	/* 
		On empêche le texte d'aller
		jusqu'au bout s'il est trop long
	*/

}

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.

.formfield-select--container::after { 
	/* Le pointeur du select */
	content: '';
	position: absolute;
	top: 50%; 
	margin-top: -3px;
	right: .75em;  
	display: block; 
	width: 0; height: 0;
	border-color: transparent;
	border-top-color: #444; 
	border-width: 6px;
	border-style: solid;
	pointer-events: none;
}

Et voilà, notre select est personnalisé sans une once de javascript 🙂 L’autre avantage de cette technique est que ce select reste parfaitement accessible.

capture d'écran du select stylé en css

Voir la démo

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

On en discute ?

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *