还原<select>下拉样式/&#34;箭头&#34;在Internet Explorer中更改css后</select>

时间:2014-05-06 21:34:29

标签: javascript jquery html css internet-explorer

我最近注意到每当我修改select元素的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

1 个答案:

答案 0 :(得分:2)

您可以使用此特定于IE的选择器设置下拉箭头样式:

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

仅适用于IE10,IE11。

JsFiddle demo