JQuery更改'Option'元素的背景颜色

时间:2010-03-06 22:58:14

标签: jquery html css

我有点讨厌,我搜索了一个JQuery方法的高低,以便在悬停下拉菜单(<select><option>foo 1</option><option>foo 2</option></select>)中更改项目的背景颜色。我该怎么做?

2 个答案:

答案 0 :(得分:1)

您可以更改option元素和select元素的背景颜色(不确定它是否可以跨浏览器正常工作)。但是,您显然无法影响下拉列表中“悬停”效果的样式。但是,您肯定不需要这种方法的JavaScript。只需为它们定义background-color,或者如果您需要更精细的粒度,请为它们提供ID。

如果您想要完全控制,目前最好的方法是通过使用适当的样式和JavaScript事件处理创建divulli来“伪造”(即悬停,点击等)。这个问题往往是没有“取消选择”事件这样的事情,所以你必须作弊才能确定是否应该关闭下拉列表(我认为大多数jQuery插件都会让这个更容易被骗拥有某种输入元素在幕后“活跃”并在丢失焦点时忽略下拉列表。

一切都与烟雾有关。只是让它“看起来”像下拉列表,即使它实际上看起来不像源代码中的那个。

答案 1 :(得分:0)

您通常无法直接影响option。您必须模拟下拉列表才能设置样式。

我完全错了。道歉!不应该忘记我的记忆 - 你可以在选择框上做基本的造型。不过,请参阅此处,了解浏览器与浏览器的不同之处:http://www.456bereastreet.com/lab/form_controls/select/

该演示只为select分配样式,但您可以

option { background-color:#eeeeee; }

甚至分配了Alan所指出的类等。 this question中的讨论指出了IE6的一些局限性 - 你可以从另一个链接给出的视觉纲要中看出这些局限性。

所以我现在一直在测试和谷歌搜索,对你来说好消息是当前对选项或整选的背景颜色/文本颜色的支持是相当不错的,但最终不稳定的浏览器是旧的。 Optgroups 仍然麻烦。任何复杂的事情都很麻烦(这可能就是为什么我把它当作完全破碎的原因)。对于更深层次的样式问题,可以在此处找到稍微更新但不太全面的外观:http://www.electrictoolbox.com/style-select-optgroup-options-css/