css - 在ie9中隐藏选择下拉箭头

Question

我在 IE 中使用了以下代码，它仅适用于 IE 10，但在 IE 8、9 中不起作用 - 选择下拉箭头至少要隐藏 IE9。请帮助我。

<select  class="dropDown">
    <option>mango</option>
    <option>banana</option>
    <option>pomegranate</option>
    <option>papaya</option>
</select>


select.dropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : #666;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
select.dropDown::-ms-expand
    display: none;
}

Answer 1

如评论中所述。 IE 9 及更低版本不支持 appearance 属性。我过去创造了类似的东西。基本上我所做的是在选择元素的箭头顶部创建一个元素。

元素只是绝对定位，背景是静态的，和网页背景一样:

selectbox
{
    position: relative;
    width: 200px;
    height: 200px

}

label 
{
    display: inline-block;
    position: absolute;
    right: 0;
    height: 23px;
}

label:after 
{
    content: '';
    width: 16px;
    height: 23px;
    position: absolute;
    right: 2px;
    color: #868583;
    background: white;
    border-left: 1px solid #868583;
    padding-left: 2px;
}

label > select 
{
    float: right;
    background: transparent;
    border: 1px solid #575757;
    color: #575757;
    font-size: 14px;
    letter-spacing: 2px;
    font-family: Arial;
    height: 100%;
}

当您希望能够点击重叠元素时，您可能希望在重叠元素上使用 pointer-events: none;。

我显示轮廓焦点，因此您看不到它勾勒出原始选择框的宽度:

select::-moz-focus-inner {
  border: 0;
}

select:focus
{
  outline: none;
}

jsFiddle

这只是我做的一个简单的例子，希望你觉得它有用。

更新

您可以在用户使用 IE 时使用此代码，否则您可以使用您的代码。