Discussion :

[dominos]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[Invité]

Bonjour,

un début de réponse ici.

[javatwister]

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

[dominos]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Invité]

Bonjour,

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

[dominos]

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.