La technique précédemment illustrée a un défaut majeur : la flèche n'est pas cliquable.
Voici donc un chouilla de javascript qui va vous permettre d'utiliser cette flèche. Cette technique n'est pas de moi. Je l'ai empruntée à Mary Lou (http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/). Le principe est un peu différent de celui exposé précédemment mais les deux ne sont pas incompatibles.
Le principe de fonctionnement du script
Le script va ajouter virtuellement des élements html à la page de base. Tous les élements de la liste déroulante seront repris dans une liste non ordonnée, et c'est cette liste qui sera customisée.
La liste déroulante initiale étant masquée, les navigateurs non graphiques pourront ainsi toujours l'utiliser.
Un code valant mieux qu'un long discourt, voici le résultat que l'on va obtenir :
<select class="cs-select cs-skin-rotate">
<option value="a">Flammekueche et Grumbeere light</option>
<option value="b">Melfor</option>
<option value="c">Carola</option>
<option value="d">Picon bière</option>
<option value="e">Wurscht</option>
</select>… qui sera transformé en …:
<div class="cs-select cs-skin-rotate">
<span class="cs-placeholder">Choose your option</span>
<div class="cs-options">
<ul>
<li data-option data-value="a" class="cs-selected"><span>Flammekueche et Grumbeere light</span></li>
<li data-option data-value="b"><span>Melfor</span></li>
<li data-option data-value="c"><span>Carola</span></li>
<li data-option data-value="d"><span>Picon bière</span></li>
<li data-option data-value="e"><span>Wurscht</span></li>
</ul>
</div>
<select class="cs-select cs-skin-rotate">
<option value="a">Flammekueche et Grumbeere light</option>
<option value="b">Melfor</option>
<option value="c">Carola</option>
<option value="d">Picon bière</option>
<option value="e">Wurscht</option>
</select>
</div>
Les scripts
Pour une compatibilité maximale, on va utiliser 2 scripts différents :
- classie.js qui va permettre à IE de se comporter comme les autres navigateurs,
- selectFx.js qui va ajouter la partie dynamique
La css est basique :
/* Default custom select styles */
div.cs-select {
display: inline-block;
vertical-align: middle;
position: relative;
text-align: left;
background: #fff;
z-index: 100;
padding:5px;
margin-left:1%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border:1px solid #ccc;
border-radius: 3px;
width:200px;
}
div.cs-select:focus {
outline: none; /* For better accessibility add a style for this in your skin */
}
.cs-select select {
display: none;
}
.cs-select span {
display: block;
position: relative;
cursor: pointer;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Placeholder and selected option */
.cs-select > span {
padding-right: 3em;
}
.cs-select > span::after,
.cs-select .cs-selected span::after {
speak: none;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cs-select > span::after {
content: '\25BC';
right: 1em;
}
.cs-select .cs-selected span::after {
content: '\2713';
margin-left: 1em;
}
.cs-select.cs-active > span::after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
/* Options */
.cs-select .cs-options {
position: absolute;
overflow-y: auto;
min-width: 100%;
background: #fff;
visibility: hidden;
border:1px solid #ccc;
max-height: 400px;
}
.cs-select.cs-active {
z-index: 200;
}
.cs-select.cs-active .cs-options {
visibility: visible;
}
.cs-select ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.cs-select ul span {
padding: 5px;
}
.cs-select ul li span:hover,
.cs-select ul li.cs-focus span {
background-color: #ddd;
}
/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
padding-left: 1em;
}
.cs-select li.cs-optgroup > span {
cursor: default;
font-weight: bolder;
}
Le rendu final est affiché sur la page de démonstration.
Ceci est l'utilisation basique du script. Je vous laisse le soin d'aller voir sur le site http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/ toutes les possibilités offertes quant au paramètrage. N'hésitez pas à regarder tous les exemples pour vous en inspirer.
Enjoy :)