<select> avec icon sans texte

Bonjour,

Depuis ce matin, je cherche à faire un select mais sans texte, juste des icones qui rempliraient 100% de la largeur et de la hauteur...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script> function change() {     select = document.getElementById("select");     select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage; } </script>   <select id="select" onchange="change();"> <option style="background-image:url('ico1.png') no-repeat; width:100px; height:100px;">csd</option> <option style="background-image:url('ico2.png') no-repeat; width:100px; height:100px;">csd</option> <option style="background-image:url('ico3.png') no-repeat; width:100px; height:100px;">cds</option> <option style="background-image:url('ico4.png') no-repeat; width:100px; height:100px;">cds</option> </select>

---

Autant le dire franchement, rien ne fonctionne, l'image ne s'affiche pas, et l'après sélection de-même... :(

Bonjour,

un début de réponse ici.

Select est aussi rigide que tous les éléments de formulaires. Si tu veux faire du "style", ne travaille pas avec.

C'est bien ce qu'il me semblait, je vais essayer avec des div.

Ceci dit, ça fonctionne maintenant après-sélection comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script> function change() { select = document.getElementById("select"); select.style.backgroundImage = select.options[select.selectedIndex].style.backgroundImage; } </script>   <select id="select" onchange="change();" style=" width: 570px; height: 50px; no-repeat "> <option style="background:url('ico1.png') no-repeat; width:100px; height:100px;"></option> <option style="background:url('ico2.png') no-repeat; width:100px; height:100px;"></option> <option style="background:url('ico3.png') no-repeat; width:100px; height:100px;"></option> <option style="background:url('ico4.png') no-repeat; width:100px; height:100px;"></option> </select>

---

mais au départ la liste est vide, le no-repeat n'est pas pris en compte, etc.
:(

Bonjour,

si l'idée est de choisir une icône, autant utiliser des <input type="radio">, non ?

disons que j'ai en tête depuis quelques temps, quelque chose d'un peu plus moderne,
je pense que je vais m'orienter vers un custom dropdown de bootstrap. merci.