当展开/单击时，选择应用了CSS框阴影动画的元素会将其自身重置为默认选项

Question

我有一个用户报告了一个select元素的错误，该元素应用了动画框阴影。我已经在我的工作Windows计算机上亲自验证了这个问题。不幸的是，我家里没有可用的Windows机器或环境来调试它。

我有一个选择元素，上面应用了一个脉动的阴影辉光。下面有一个演示链接和代码。在Windows上的Chrome（26）中，选择元素确实会发光，但当用户每秒钟（或更短时间）点击一次选择菜单时，菜单会将其选择重置为选择菜单中的第一个选项。这样就无法滚动并选择正确的选项。选择菜单有73个选项。

有人知道如何绕过这个吗？如果将动画应用于包含选择菜单的父元素，也会发生同样的情况。

演示链接：http://jsfiddle.net/P72u7/1/

CSS：

.glow {
    -webkit-animation-name: promptGlow;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-name: promptGlow;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes promptGlow {
    from {
        box-shadow: 0 0 10px rgba(51, 51, 51, 0.22);
    }
    50% {
        box-shadow: 0 0 40px rgba(51, 51, 51, 0.44);
    }
    to {
        box-shadow: 0 0 10px rgba(51, 51, 51, 0.22);
    }
}

HTML:

<select class="glow">
    <option value="1" selected="">Abraham Moss</option>
    <option value="2">Altrincham</option>
    <option value="3">Anchorage</option>
    <option value="4">Ashton Moss</option>
    <option value="73">Woodlands Road</option>
</select>

Answer 1

您可以将<select>封装在<div>中，然后对<div>进行样式设置

HTML

<div class="glow">
    <select>
        <option value="1" selected="">Abraham Moss</option>
        <option value="2">Altrincham</option>
        <option value="3">Anchorage</option>
        <option value="4">Ashton Moss</option>
        <option value="73">Woodlands Road</option>
    </select>
</div>

CSS

.glow {
    width: 180px; /*This will have to adjust to the width of your select*/
    -webkit-animation-name: promptGlow;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-name: promptGlow;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}
.glow select {
    border: 0px; /*This removes the small white border that Chrome adds by default*/
}

小提琴请参见此处：http://jsfiddle.net/9DZht/