Un peu de HTML pour commencer #
Pour mon exemple, j’ai décidé de choisir une petite question toute bête qui possède la faculté de foutre le bordel très facilement dans certains forums de joueurs. Concernant le code en lui-même, rien de bien compliqué. Une liste déroulante est composée d’une balise <select> qui englobe une liste de balises <option> qui symbolisent chaque élément de notre liste. Mais ce qui nous intéresse le plus n’est pas le code HTML, mais le CSS que vous pouvez voir juste après :
<div class="bloc">
<div class="select">
<select>
<option>Vous êtes plutôt ?</option>
<option value="1">PlayStation</option>
<option value="2">Xbox</option>
<option value="3">Nintendo</option>
<option value="4">PC Master Race</option>
</select>
</div>
</div>
Et beaucoup de CSS pour finir #
/* Ajout d’une petite image de fond juste pour le fun */
body {
font-family: 'Lato', sans-serif;
color: #555555;
background: url(https://www.desktopbackground.org/p/2013/12/13/684937_nuclear-war-wallpapers_1600x900_h.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/* Pas important, juste pour positionner la liste déroulante en milieu de page */
.bloc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
/* Réinitialisation de la liste déroulante */
select {
appearance: none;
outline: 0;
border: 0 !important;
background: #F9F9F9;
background-image: none;
box-shadow: none;
font-size: 1.2em;
}
/* Ajout des couleurs de fond pour chaque option */
select option[value="1"] {
background: #2E6DB4;
color: white;
}
select option[value="2"] {
background: #107C11;
color: white;
}
select option[value="3"] {
background: #E70009;
color: white;
}
select option[value="4"] {
background: black;
color: white;
}
/* Mise en place des dimensions. On cache la flèche d’origine */
.select {
position: relative;
width: 350px;
height: 45px;
overflow: hidden;
border-radius: 5px;
border: 1px solid #CED4DA;
}
/* On adapte la liste déroulante à la div qui l’englobe */
select {
width: 100%;
height: 100%;
margin: 0;
padding-left: 15px;
color: #555555;
cursor: pointer;
}
/* Mise en place de la flèche */
.select::after {
content: '\276F';
position: absolute;
top: 20%;
right: 0;
padding: 0 15px;
background: #F9F9F9;
pointer-events: none;
transform: rotate(90deg);
font-size: 1.5em;
}
.select:hover::after {
color: #FA6141;
}
J’ai ajouté quelques lignes de commentaires pour vous expliquer les grandes lignes de mon code, mais je vais tout de même revenir sur quelques points qui me paraissent essentiels.
1. Réinitialisation de la liste #
Avant de commencer à mettre en forme une liste déroulante, il est important de la réinitialiser pour partir sur de bonnes bases. C’est-à-dire faire disparaître tous les éléments de style par défaut. Comme vous pouvez le voir dans le code ci-dessous, ce n’est pas très compliqué, j’utilise la déclaration appearance:none pour réinitialiser le rendu par défaut de la liste, j’efface les bords avec mon « border : 0 », j’applique une couleur de fond et j’enlève le halo lorsqu’on clique sur la liste avec « outline : 0 ».
select {
appearance: none;
outline: 0;
border: 0 !important;
background: #F9F9F9;
background-image: none;
box-shadow: none;
font-size: 1.2em;
}
2. Ajout d’une nouvelle flèche de sélection #
Comme la vie est très mal faite, on ne peut pas modifier le style de la flèche de sélection par défaut hormis la couleur ou la taille. Il faut donc la cacher et en créer une nouvelle toute belle à la place. Et c’est justement là qu’intervient la première div que j’ai placée au-dessus de la balise <select>. En effet, c’est grâce à cette div qu’on fixe les dimensions de la liste déroulante et qu’on peut cacher la flèche d’origine avec l’attribut overflow: hidden.
.select {
position: relative;
width: 350px;
height: 45px;
overflow: hidden;
border-radius: 5px;
border: 1px solid #CED4DA;
}
select {
width: 100%;
height: 100%;
margin: 0;
padding-left: 15px;
color: #555555;
cursor: pointer;
}
Une fois qu’on s’est occupé de cacher la flèche d’origine, il faut en créer une nouvelle. Et pour cela, on va utiliser le pseudo-élément ::after pour créer une toute nouvelle flèche à la droite de la div principale. Je pense que le code ci-dessous est assez parlant pour se passer de description, mais sachez que vous pouvez changer l’allure de la flèche à l’aide de l’attribut content. Ici, j’ai utilisé un chevron classique auquel j’ai appliqué une rotation de 90° pour lui donner l’apparence d’une flèche vers le bas.
.select::after {
content: '\276F';
position: absolute;
top: 20%;
right: 0;
padding: 0 15px;
background: #F9F9F9;
pointer-events: none;
transform: rotate(90deg);
font-size: 1.5em;
}
.select:hover::after {
color: #FA6141;
}
Et voilà, même si ça aurait gagné à être plus simple et moins tarabiscoté, la stylisation d’une liste déroulante en CSS n’a rien de fondamentalement très compliqué. Il suffit juste de suivre ces quelques étapes et ensuite laisser parler son imagination. Mon exemple est ici assez rudimentaire, mais il y a moyen de faire des choses vraiment très intéressantes visuellement et d’embellir le tout d’un soupçon de JavaScript pour y ajouter un peu de mouvement. Mais là, je vous laisse faire…
En attendant, je vous laisse la démo de ma liste déroulante juste en-dessous.