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

Question

Can anyone give me a cross-browser supported solution for this problem?

Please state what problems you are facing and in what browsers. Also for better feedback, you may want to read the [faq](http://stackoverflow.com/faq) to make a better question. — Fewfre, Jun 26 '12 at 12:23

score 3 · Accepted Answer · answered Jun 26 '12 at 12:24

3

You can use a custom jquery plugin like in this reference:

http://www.marghoobsuleman.com/jquery-image-dropdown

answered Jun 26 '12 at 12:24

Ahsan Rathod

5,397
2
19
25

score 2 · Answer 2 · answered Jun 26 '12 at 12:28

2

HTML:- You can use inline style like below,

<select>
    <option style="background-image:url(1stimage.gif);">1</option>
    <option style="background-image:url(2ndimage.gif);">2</option>
    <option style="background-image:url(3rdimage.gif);">3</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

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

answered Jun 26 '12 at 12:28

Subhajit

1,859
3
18
21

The link was exactly what I needed to make my own dropdown, having already tried to use the msdropdown in the accepted answer. (msdropdown is brilliant, but I found it hard to get it to match my other jQuery widgets.) – Scott Mermelstein Apr 18 '13 at 23:13
6

I believe background images do not work on option elements. – Christoph Jul 19 '13 at 11:51
This works only on Firefox – piotr_cz Apr 07 '16 at 13:32
its not working in chrome – Pons Purushothaman Mar 07 '19 at 10:59

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

2 Answers2

Linked