2

我有一个selecthtml 标签，我希望在行之间交替，下面是我的background-color尝试option

<select name="j_idt8:j_idt13" size="1">    
   <option value="value1" class="option1">label1</option>
   <option value="value2" class="option2">label2</option>
   <option value="value3" class="option1">label3</option>
   <option value="value4" class="option2">label4</option>
   <option value="value5" class="option1">label5</option>
</select>

option.option1 {
   background-color: #ccc;
}

option.option2 {
   background-color: #fcc;
}

这仅适用于 FF，但不适用于 Chrome 和 safari，CSS 专家可以帮我解决这个问题吗？我也附上了 jsfiddle，这样你就可以在不同的浏览器之间打开它们。

http://jsfiddle.net/cYEE2/

注意：Chrome：20.0.1132.47
Safari：5.1.7
Firefox：13.0.1

4

2 回答 2

3

并非所有浏览器都支持着色选择选项，即使在其中通常也存在填充等问题。

我的建议是在支持它的浏览器中简单地使用它（Firefox 完全，Chrome 部分但完全忽略填充和 Safari），而在那些不支持它的浏览器中忘记它。

其他浏览器根本不支持此选项。

于 2012-07-01T22:57:00.790 回答
2

不幸的是，能够使用 CSS 更改 SELECT 元素中单个 OPTION 元素的格式是特定于浏览器的。您上面的 CSS 不适用于某些浏览器。

您可以使用 SELECT 元素的 CSS 友好替代方案，例如 jQuery 插件。

于 2012-07-01T22:56:31.060 回答