Question

I know, someway, somehow, you can do this. I just am not sure. I would preferably like to override the default blue hover for select menus (drop downs) so that I can add a box-shadow: inset 0 0 3px 3px to my options.

So, JavaScript, JQuery, (preferably) CSS?

I don’t know much about JavaScrip and JQuery… I haven’t gotten that far yet, but any help with this problem would be greatly appreciated.

Thank you!

http://lrroberts0122.github.com/DWS/lab6/level-1/

Answer 1

Not every browser allows that. in fact, If you look at your website in chrome, you’ll see that the selectbox itself is not even displaying the grey background. Resulting in white text on a white background.
If you really want to style the dropdown yourself, I would suggest to use javascript/jquery to replace the select/option with an ul/li, which you can style as you wish.

I’ll try to find some examples to get you started. Just a second.

Edit: This should get you started: http://tutorialzine.com/2010/11/better-select-jquery-css3/

edit2: here’s another one: http://bnotions.com/form-select-replacement-using-jquery-css/

And this person even created a plugin: http://forrst.com/posts/jQuery_plugin_ReplaceDropdown_to_replace_a_selec-NA2

disclaimer: I haven’t tested any of the links above myself. So use at your own discretion.