add image in option

Question

Hi all, Can anyone tell me how can i add an image in Select box

HTML

<option  id ="OP_{$LANG.MY_ID}" class="boardDialog" style="font-size:12px" value="OP_{$LANG.MY_ID}">

CSS

.boardDialog{

    background-image: url(../images/Work_Board_Member.png);
    background-repeat: no-repeat
}

This is working fine on Mozilla but does not work in IE and Google chrome. Can anyone tell me how can i do this google chrome

Answer 1

this isnt possible in IE and probably chrome. The only real workaround is to create a faux dropdown using javascript but this isnt really advisable - unless it degrades gracefully.

Answer 2

You won't be able to achieve this functionality using the select tag. You have to make a custom control for this.

Here is an example

Combobox with icons:

Also found a similar SO question

Image Dropdownlist

Answer 3

+1 with seengee, except for the not only advisable. You can implement this kind of "control" in your website, it depends how you do.

You create a dropdown using javascript, but the page have to work good, using a normal dropdown, if someone come up with disabled javascript, or a mobile device.

You can see kind of this drop down on facebook, or "web 2.0 javascript ajax full of crap" websites.