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

Question

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

Solution 1

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

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

Solution 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

Comments

[Scott Mermelstein]

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

[Christoph]

I believe background images do not work on option elements.

[piotr_cz]

This works only on Firefox

[Pons Purushothaman]

its not working in chrome