如果 <select> 应用了悬停样式，则 <select> <option> 元素悬停故障

Question

当从<select> 中选择某些东西时，当悬停时有不同的样式时，它会将悬停<option> 重置为初始状态。我该如何克服这个问题，因为如果存在 transition 属性，它会变得更糟？

编辑：

• FF23,IE10,O12.5好像没有这个问题
• Safari 和谷歌浏览器显然有这个问题。

要查看我在说什么，请按照以下步骤操作：

1. 选择最后一个选项
2. 点击选择框
3. 将鼠标慢慢向下移动到选项上，现在您可以看到选项是如何出现故障的

示例：jsFiddle

CSS：

select {
    padding: 5px;
    border: 1px solid blue;
    -moz-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
}
select:hover {
    border: 1px solid red;
}

HTML：

<select>
    <option value="mankind">Man kind</option>
    <option value="humankind">Human kind</option>
    <option value="animalkind">Animal kind</option>
</select>

---

这似乎是与 Chrome 相关的错误

• 问题287193
• 相关问题289326

Answer 1

不要认为你可以做任何事情..看起来像缓动时围绕控件渲染的问题。

如果你坚持这种行为，你可以试探。骗它——你能把 SELECT 打包到 div 里，让 div 变得轻松吗？

<div class="whizbangselect">
  <select>
    <option value="mankind">Man kind</option>
    <option value="humankind">Human kind</option>
    <option value="animalkind">Animal kind</option>
  </select>
</div>

风格：

select {
    border: none;
}
div.whizbangselect {
    display: inline-block;
    border: 1px solid blue;

    -moz-transition: border 1s ease-out;
    -o-transition: border 1s ease-out;
    -webkit-transition: border 1s ease-out;
    transition: border 1s ease-out;
}
div.whizbangselect:hover { border: 1px solid red; }

注意：你必须使用填充

Answer 2

希望我没有误解你的问题。

试试这个Jsfiddle

select {
    outline: 0; 
    padding: 5px;
    border: 1px solid blue;
    -moz-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
}
select:hover {
    border: 1px solid red;
}

我输入了selectoutline:0