Personnaliser select

Benjamin Derepas
Les bases HTML/CSS

Bonjour,

Je suis en train de développeur une application web pour la gestion de projets. Coté PHP, aucun problème, tout est déjà fonctionnel.
Cependant, j'aimerais améliorer le coté UI , qui est très léger pour le moment.
Personnaliser les input texte,textarea, boutons, checkbox & radio, aucun soucis (merci encore Grafikart pour les derniers tuto).
Mais comment personnaliser les select & options ? On m'a parler d'une technique avec des ul / li, comment cela fonctionne t-il ?

Si j'ai bien compris : on créer un select, avec x options, puis on le cache. On créer par dessus un ul avec x li , et sela le choix du li cliquer, le select prend cette valeur ?
Le javascript (et même jquery) n'est pas mon domaine de prédilection, aussi, pourriez vous me mettre sur la voie svp ?

3 réponses

2b3ez
Réponse acceptée 
<ul id="monul">
<li data="myvar1">Test1</li>
<li data="myvar2">Test 2</li>
</ul>
<select id="myselect" style="display:none;">
<option value="myvar1"></option>
<option value="myvar2"></option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#monul > li').click(function(){
        $('#myselect').val($(this).attr('data'));
        console.log($('#myselect').val()); // pour tester dans ta console
    });
});
</script>

Tu peux aussi très bien utiliser un input hidden avec ton menu ul plutôt qu'un select ;)
Tu créés les data de tes li avec ta boucle while ou for. Après un clic sur un lien, tu stocke ta variable dans un input de type hidden que tu traites en post comme n'importe quelle variable ;)

Sinon tu peux utiliser bootstrap et son plugin Select pour personnaliser tes champs de formulaire ainsi que tes select ;)

Nairolf

Voilà un peu de documentation:

http://bavotasan.com/2011/style-select-box-using-only-css/

Benjamin Derepas
Auteur

Merci Nairolf mais je connais cette technique, elle permet seulement de changer l'aspect du select en lui même , pas de ses options ;)