如何在悬停期间为选择标记中的选项提供不同的背景颜色

Question

<select name=""   id="gender"  name ="gender" class="genderClass">
<option value="0">Please select gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>

这是班级：

.genderClass:hover
{
    background: gray;
}

mouseover标记的select目前为我提供了灰色。但是，当打开标记和选项时，我如何设置background-color选项，而我mouseover。即。如果我将鼠标移到女性option，则应将background-color更改为灰色。 我怎么能这样做？

jsfiddle link

Answer 1

我认为你不能只使用css，而是使用javascript你可以使用自定义选择来实现它。如果您使用jQuery，则下面是您可能喜欢的两个插件示例。

1. Sparkbox Custom-Selectbox和an example here。
2. jQuery custom selectboxes和an example here.

如果您在Google like this one上搜索，也可以找到更多信息。

Answer 2

无法指定所选选项以更改其背景颜色。将背景应用于选择或选项标签将更改整个选择的背景，除了所选条目或除所选条目之外的所有选项。

我认为可以更改所选条目背景颜色的唯一方法是通过您在计算机上的操作系统中定义的主题，并且只会为您而不是访问者更改它。 / p>