Guillaume Duverger - Développement & Graphisme - Blog

Elément select HTML

Présentation de l'élément HTML select dans la version classique qui varie selon l'agent utilisateur (le navigateur) :

Code :

<select>
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
</select>

Si l'on souhaite personnaliser l'apparence de l'élément select avec CSS, nous allons devoir ruser car cet élément possède peu de propriétés CSS pour le styler et ne reconnaît pas le modèle de boîte CSS.

Nous allons, pour ce faire, englober l'élément select avec un élément div qui va nous permettre d'appliquer des styles CSS.

En première instance, nous appliquons la propriété appearance (la compatibilité est très faible à l'heure actuelle, il faudra utiliser des préfixes) sur l'élément select, ceci afin de réinitialiser le style par défaut proposé par l'agent utilisateur.

Voici le résultat :

Code :

select{
	
appearance: none;
-webkit-appearance: none;/*blink-webkit*/
-moz-appearance: none /*firefox*/
	
	}

La flèche sur le côté droit a disparu et les bordures n'existent plus. Nous pouvons désormais styliser la bordure du select mais aussi l'arrière-plan. Et surtout remplacer la flèche par une image ou une chaîne de caractère.

Dans l'exemple ci-dessous, nous avons déclaré l'image de la flèche directement dans l'élément select :

code :

<div class="custom">
<select>
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
</select>	
</div>

.custom {
	
max-inline-size: 12rem;
margin-block: 7rem;
margin-inline: auto;
	
}

.custom select{
	
inline-size: 100%;
max-inline-size: 100%;
padding-block: 10px;
padding-inline: 20px;
border-inline: 2px solid purple;
border-block: 2px solid purple;
transition: background-color .4s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none
	
	}
	
.custom select{

background:url(fleche.svg) no-repeat 95% 50%/20px 20px


}

.custom select:focus,
.custom select:hover{

background-color: #ddd

}

Une autre technique consiste à utiliser le pseudo-élément ::before ou ::after pour placer l'image ou chaîne de caractère via la propriété content :

Code :

.custom1 {
	
position: relative;
overflow: hidden;
max-inline-size: 12rem;
margin-block: 7rem;
margin-inline: auto;
	
}

.custom1 select{

inline-size: 100%;
max-inline-size: 100%;
padding-block: 10px;
padding-inline: 20px;
border-inline: 2px solid purple;
border-block: 2px solid purple;
transition: background-color .4s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none
	
	}
	
.custom1 select:focus,
.custom1 select:hover{

background-color: #ddd

}


.custom1:before{

content:'▼';
block-size:calc(100% - 4px);
font-size: 1rem;
position: absolute;
inset-block-start:50%;
transform:translatey(-50%);
inset-inline-end:2px;
display:flex;
align-items: center;

}
	
	
.custom1:focus:before,
.custom1:hover:before{
	
background-color: #ddd;

		
	}