选择和选项样式

Question

如何设置选择选项的样式？我想要在下拉菜单中交替背景颜色。

Answer 1

就像任何其他元素一样，

option:nth-child(even) {
  background-color: red;
}

option:nth-child(odd) {
  background-color: blue;
}

如果您需要支持不支持nth-child的浏览器，您将需要使用一个类。

有些浏览器根本不支持样式选项（猜猜是哪些）。

Answer 2

好的，如果这是 HTML/CSS 的方式，我不妨建议一个很棒的 jQuery UI 插件，名为 UI 选择菜单。这是迄今为止我所见过的精选菜单中最美妙的事情。我打赌你可以用它轻松实现交替选项颜色。

但可以公平地说，这个插件正处于开发阶段 - 谨慎行事！

Answer 3

只需添加尺寸属性和选择标签即可。示例 select size="4"，其中 4 是要显示的选项数。