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

Question

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

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

2

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,465
2
21
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,929
3
19
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

Related