Images in <option>

Hey there,

I want to place images into my drop down menus. Its for a rating system, so rather than writing “1 Star”; I want an image of a star. So that:

<select …>
<option value=“1”>Star.gif Star</option>

Ive Google’d, and searched the forums, and no direct solutions. By direct I mean, without including Javascript libraries, which I want to avoid, if I can.

Any hints would be great. I apologize if i’ve posted in the wrong section.


Are you sure this can be done?

Haha, Ive seen one example somewhere. Pretty sure it was swimming with Javascript.

I wouldnt mind being told its not possible, so I can move on…

So I dont know. Hopefully, CSS, DHTML?

DHTML uses JavaScript so I think your answer is no.

No need for js, dhtml…

just use css, use a background image on the option, give it an id, add some left padding, you’re done.


option#star1 { background-image:url(star.png); padding-left:15px; }

edit: and add no repeat, forgot about that.

Nice to know it can be done. :tup:

That’s not a very practical solution. Background images are not some magic replacement for content. If CSS or images are disabled, the drop-down becomes totally inaccessible. Not to mention browsers like Safari doesn’t even allow background images on form controls.

Unless it’s a combination of the background star and fully descriptive text, of course. :wink:

You can definately use background image but try using html characters, insted of images, that can be a better option

There is no way to use an image in the background of an option. All you can do is chage the color, background color, font, bold and font style etc. You also can’t color the scrollbar in an option either. You can’t even do any of that in Safari. :slight_smile:

simple unicode star -> ★

I saw a cool hack of js and css makeing kind of a “fake option” menu. It’s going to be some work but you could essentially achieve the same effect.

It’s a cool idea but I haven’t tried it so…I haven’t even seen it in action but looks like something cool.