CODEWITHSUNDEEP
jqueryhtmlcss
Parish
Parish

Reputation: 13

JQuery Change Background Color of 'Option' Element

I'm in a bit of a rut, i've searched high and low for a JQuery method to change the background color of an item in a drop-down menu (<select><option>foo 1</option><option>foo 2</option></select>) on hover. How am i supposed to do this?

Upvotes: 1

Views: 4716

Answers (2)

user241244
user241244

Reputation:

You can't generally visually affect option directly. You have to simulate the dropdown in order to style it.

And I completely got that wrong. Apologies! Shouldn't have gone off my memory--you can do basic styling on select boxes. See here, though, for the ways it will vary from browser to browser: http://www.456bereastreet.com/lab/form_controls/select/

That demo assigns style just to select, but you can do

option { background-color:#eeeeee; }

and even assign classes, etc. as noted by Alan. The discussion in this question point out some of the IE6 limitations--which you can see pretty well from the visual rundown the other link gave.

So I've been testing and googling for a bit now, and the good news for you is that current support for background-color/text color on options or whole selects is pretty good, but ultimately spotty the older the browser is. Optgroups are still troublesome. And anything complex is troublesome (which is probably why I recalled it as totally broken). For deeper styling issues, a slightly more up-to-date, but less comprehensive look can be found here: http://www.electrictoolbox.com/style-select-optgroup-options-css/

Upvotes: 0

Alan Plum
Alan Plum

Reputation: 10902

You can change the background color of option elements and the select element (not sure whether this works reliably cross browser). You apparently can't affect the style of the "hover" effect in the dropdown list, though. You certainly don't need JavaScript for this approach, however. Just define background-color for them or give them IDs if you need finer granularity.

If you want full control, currently the best approach is "faking it" by creating divs or uls and lis with the apropriate styling and JavaScript event handling (i.e. hover, click, etc). The problem with this tends to be that there is no such a thing as an "unselect" event, so you have to cheat in order to figure whether the dropdown should be dismissed (I think most jQuery plugins and such that make this easier cheat by having an input element of some kind be "active" behind the scenes and dismissing the dropdown when it loses focus).

It's all about the smoke and mirrors. Just make it "look" like a dropdown, even if it doesn't actually look like one in the source code.

Upvotes: 1

Related Questions