Voici une petite astuce pour modifier l'apparence d'une liste déroulante, flèche comprise. Cela ne fonctionne que pour les navigateurs récents, c'est à dire ceux supportant le CSS3. Nous n'utiliserons aucun javascript pour arriver à nos fins.
Ça vaut ce que ça vaut mais je vous la partage avec plaisir.
La structure HTML
L'astuce repose en fait sur une balise qui va envelopper l'ensemble de l'élément de formulaire, et qui va masquer la liste déroulante. C'est cette balise surnuméraire que nous allons styliser.
Nous utiliserons une balise span afin de ne pas trop perturber la structure native et permettre de l'inclusion de la liste dans un paragraphe.
<form action="" method="post">
<p>
<label for="id_demo">Ma liste déroulante</label>
<span class="select-wrapper"><select id="id_demo" name="demo">
<option value="a">Picon bière</option>
<option value="b">Melfor</option>
<option value="c">Carola</option>
<option value="d">Flammekueche</option>
<option value="e">Wurscht</option>
</select></span>
</p>
<p>
<input type="submit" name="sub" value="Envoyer"/>
</p>
</form>La feuille de style
Les bases
Nous allons transformer via css, le type inline de la balise span en type block, afin de pouvoir masquer la liste.
Tout ce qui dépassera de cette balise sera masqué donc via un overflow-x. Nous donnerons une bordure et un paddingà la balise span afin de rendre le tout un peu plus joli.
Nous forcerons le curseur à être de type pointer afin de voir une main lors d'un survol de l'ensemble.
.select-wrapper {
display:block;
overflow-x:hidden;
border:1px solid #ccc;
border-radius:3px;
padding:5px;
cursor:pointer;
}À ce stade, voici ce que nous obtenons.
Masquer la flèche
Afin que la flèche de la liste déroulante soit masquée, nous allons agrandir cette liste de manière à la faire dépasser de son conteneur parent (ici, la balise span). Pour cela, nous forçons sa largeur pour qu'elle soit au minimum égale à 130%.
.select-wrapper select {
border:0;
min-width:130%;
cursor:pointer;
}Le résultat : la flèche est bien masquée, la bordure originelle de la liste est "effacée" mais il y a encore quelques ajustemens à faire. Ajouter une flèche et supprimer le pointillés qui s'affichent lorsque l'on déroule la liste.
Suppression des pointillés et affichage d'une nouvelle flèche
Pour supprimer les pointillés, nous utilserons une astuce que j'ai trouvé sur Stack Overflow qui conciste à rendre transparent tout le contenu de la liste avec color:rgba(0,0,0,0) puis à réafficher l'ensemble en utilisant les ombres de texte (text-shadow: 0 0 0 #000;). Pour les vieux navigateurs, nous forçons la couleur de la police à "noir" (color:#000;).
Opera ne met pas d'ombre sur les textes transparents. Pour palier à ce comportement, il faut utiliser un sélecteur css qui cible spécifiquement Opera et on force la couleur à noir. Malheureusement, les pointillés sont toujours présents pour ce navigateur.
Les navigateurs webkit (Chrome, Safari, Opera) ajoutent un style spécifique en plus de ces pointillés. Pour l'annuler, il faut utiliser le prefixe propriétaire -webkit sur la propriété appearance que l'on met à none.
Chrome ajoute un saut de lignes quand une option de la liste est longue. Pour annuler ce comportement, il faut mettre la valeur de white-spaceà nowrap qui fusionne les espaces comme normal, mais n'ajoute pas de rupture de ligne automatique (justification automatique).
.select-wrapper select {
border:0;
min-width:130%;
cursor:pointer;
color:#000;
color:rgba(0,0,0,0);
text-shadow:0 0 0 #000;
-webkit-appearance:none;
outline:none;
white-space:nowrap;}
/* Pour Opera */
noindex:-o-prefocus, .select-wrapper select {
color:#000;
}
L'affichage de la nouvelle flèche fait appel au pseudo-élément :after de la norme css3. Cela nous permettra de faire apparaître artificiellement un bloc à la suite de la balise span, bloc qui contiendra notre nouvelle flèche.
Ce bloc sera placé à droite par un flottant dont la position sera relativeà celle de son parent.
La flèche sera obtenue grâce au caractère unicode "&9660;" qui donne ▼ mais nous utiliserons plutôt la notation hexadécimale (\25BC) pour une interprétation par la feuille de style.
.select-wrapper:after {
content:"\25BC";
display:block;
position:relative;
float:right;
top:-25px;
right:-5px;
background-color:#fff;
width:32px;
text-align:center;
}Ce qui nous donne : La liste est quasiment parfaite. Reste à corriger la marge du bas qui est trop importante.
.select-wrapper:after {
content:"\25BC";
display:block;
position:relative;
float:right;
top:-25px;
right:-5px;
background-color:#fff;
width:32px;
text-align:center;
margin-bottom:-25px;
}