Images in <option>

auth1 · February 14, 2006, 4:00am

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:

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.

Thanks.

stymiee · February 14, 2006, 4:14am

Are you sure this can be done?

auth1 · February 14, 2006, 4:18am

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?

stymiee · February 14, 2006, 4:21am

DHTML uses JavaScript so I think your answer is no.

mrmagu · February 14, 2006, 4:38am

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.

eg:

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

edit: and add no repeat, forgot about that.

stymiee · February 14, 2006, 4:39am

Nice to know it can be done. :tup:

system · February 14, 2006, 12:07pm

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.

system · February 16, 2006, 6:16am

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

cssiscool · February 17, 2006, 4:57pm

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.

jimfraser · February 17, 2006, 6:28pm

simple unicode star -> ★

hifigrafix · February 17, 2006, 6:41pm

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.

http://www.phpcomplete.com/archives/2004/08/26/select-multiple-done-right/

system · October 8, 2014, 12:34am