如何更改 IE 的“选择”元素？ [复制]答案

【问题标题】：How to change `select` element for IE? [duplicate]如何更改 IE 的“选择”元素？ [复制]
【发布时间】：2016-05-11 18:06:39
【问题描述】：

我看到this answer 在select 元素上渲染一个箭头：

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/

它适用于 Chrome。

对于 Firefox，-moz-appearance: none; 可以解决问题。

但是对于 IE 我就不知道了。

【问题讨论】：

标签： css

【解决方案1】：

添加这个（我猜是 IE 10 +）：

select::-ms-expand {
    display: none;
}

学分：Remove Select arrow on IE

对于 IE9，用 div 包装您的选择并使用类似这样的内容（将在原始图像之上的图像）：

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    -webkit-appearance: none;
    background-position-x: 244px;
}

select::-ms-expand {
    display: none;
}

div {
    position:relative;
    display:inline-block;
    border:solid black 1px;
    z-index:0
}
div select {
    z-index:1;
}

div:before {
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_up.png) no-repeat right #ddd;
    display:block;
    position:absolute;
    content:'';
    right:6px;
    top:5px;
    height:1em;
    width:1em;
    margin:2px;
    z-index:5;
}

IE 8 或之前你不能。

【讨论】：