photos in select-option are not shawn in chrome?

Question

I have a little problem with the select option! the problem is that if i put photos in the list they are displayed in Fire-Fox but in chrome they are not !!

this is my code :

function change() {
 
select = document.getElementById("select");
select_s = select.style;
 
switch(select.selectedIndex) {
 
case 0 :
select_s.background = "url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat";
break;
 
case 1 :
select_s.background = "url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat";
break;
}
}

<body>
 
<select id="select" onchange="change();">
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;"></option>
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;" </option>
</select>
 
 
</body>

Thank you for your help !

score 4 · Answer 1 · answered Dec 22 '15 at 16:12

4

I guess there is not way of doing that. Only Firefox support this feature, in order to get this work in other browser you should use some JQuery plugin.

Check ddSlick instead, could be useful in your case

answered Dec 22 '15 at 16:12

Stefano Saitta

1,844
1
19
34

thanks for the answer ! – G.Mab Dec 22 '15 at 16:18

score 0 · Answer 2 · edited May 23 '17 at 12:31

<select id="select" onchange="change();">
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;"></option>
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;"></option>
</select>

The above code would work in Firefox and Webkit browsers. For rest of the browsers you can use JQuery UI, please find the link below

http://docs.jquery.com/UI/Selectable

You can also try this http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

Source: How to add background image for options in a select box?

photos in select-option are not shawn in chrome?

2 Answers2