在 Internet Explorer 中更改 css 后恢复 <select> 下拉样式/“箭头”答案

【问题标题】：Revert <select> drop down style/"arrow" after changing css in Internet Explorer在 Internet Explorer 中更改 css 后恢复 <select> 下拉样式/“箭头”
【发布时间】：2014-06-23 16:06:32
【问题描述】：

我最近注意到，每当我修改选择元素的 css 时，它都会更改下拉箭头。在 IE 11 中，它从带有白色背景的简单向下箭头变为带有灰色背景的简单箭头。

你可以用这个 jsFiddle 看到一个非常简单的例子：http://jsfiddle.net/99gPQ/

Normal Select:&nbsp;
<select>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<br />
CSS Select:&nbsp;
<select style="background-color: lightcoral;">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

通常在提交前检查表单时出错，我会用彩色背景突出显示错误，然后当用户修复错误时，我会恢复背景。我似乎无法找到执行以下操作：1）使更改后的背景颜色位于向下箭头后面，2）当我恢复为白色背景时，返回原始视觉样式，而不是修改后的灰色箭头后面的背景。

任何帮助将不胜感激。

-CA

【问题讨论】：

重复？ stackoverflow.com/questions/1895476/…

标签： javascript jquery html css internet-explorer

【解决方案1】：

您可以使用这个 IE 特定的选择器来设置下拉箭头的样式：

select::-ms-expand {
    /* your styles */
}

仅适用于 IE10、IE11。

JsFiddle demo

【讨论】：

谢谢。你的小提琴效果很好。不知道为什么 IE 有时必须如此困难。