“选项”元素

Question

我有点车辙我的JQuery的更改背景颜色，我已经搜查高和低一个jQuery的方法来改变一个项目的背景颜色在下拉菜单（<select><option>foo 1</option><option>foo 2</option></select>）悬停。我应该如何做到这一点？

Answer 1

你一般不能在视觉上直接影响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/

Answer 2

您可以更改option元素的背景颜色和select元（不知道这是否可靠地工作跨浏览器）。不过，您显然不能在下拉列表中影响“悬停”效果的风格。不过，您肯定不需要JavaScript。只需为他们定义background-color或给他们ID，如果你需要更精细的粒度。

如果你想完全控制，目前最好的办法是通过与apropriate造型和JavaScript事件处理创建div S或ul S和li S（即悬停，单击等），“装病”。这样做的问题往往是没有“不选择”事件，所以你必须作弊才能确定下拉是否应该被解除（我认为大多数jQuery插件以及这样做使得这更容易被具有某种输入元素在后台“活动”，并在失去焦点时解除下拉菜单）。

这是关于烟雾和镜子。只要让它看起来像一个下拉菜单，即使它看起来不像源代码中的一个。