您如何为下拉菜单设计样式或覆盖默认悬停颜色？ [英] How do you style or override the default hover color for drop down menus?

问题描述

我知道，不知何故，你可以做到这一点。我只是不确定我最好想覆盖选择菜单（下拉菜单）的默认蓝色悬停，以便我可以添加一个box-shadow：inset 0 0 3px 3px到我的选项。

所以，JavaScript，JQuery（最好）CSS？

我不太了解JavaScrip和JQuery ...我还没有得到那么远，但是

谢谢！

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

解决方案

不是每个浏览器都允许。事实上，如果您在Chrome中查看您的网站，您会看到选择框本身甚至不显示灰色背景。导致在白色背景上的白色文本。
如果你真的想自己设计下拉列表，我建议使用javascript / jquery来替换选择/选项与ul / li，您可以根据需要进行风格。

我会尝试找到一些让你开始的例子。只需一秒钟。

编辑：这应该让你开始： http://tutorialzine.com/2010/11/better-select-jquery-css3/

edit2：这是另一个： http://bnotions.com/form-select-replacement- using-jquery-css /

这个人甚至创建了一个插件： http://forrst.com/posts/jQuery_plugin_ReplaceDropdown_to_replace_a_selec-NA2

免责声明：我没有测试任何我自己以上的链接所以请自行决定使用。

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/

解决方案

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.

这篇关于您如何为下拉菜单设计样式或覆盖默认悬停颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！