How To Add Background Image For Options In A Select Box?

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