在IE9中隐藏默认的下拉选择箭头

Question

演示

我尝试使用css的appearance: none;隐藏选择框下拉箭头。但在IE9中，箭头仍然显示。如图所示。

有没有任何办法可以使用css或jquery来隐藏箭头？

这是我的代码：

    .fields-set select{
height:32px;
border:1px solid #ccc;
margin: 0 19px 0 1%;
padding:0 32px 0 1%;
width:55%;
float: left;
overflow: hidden;
background:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR3xT6PSVebCcTYjggESCb55GBM91fGgbyrMFbs3CGeFoQjFwVB") no-repeat scroll right center padding-box border-box #FFF;
box-shadow: none;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
    -ms-appearance: none  \9;
     -o-appearance: none;
    }

- ItzMe_Ezhil

---

可能是在IE上移除选择箭头的重复问题。 - Shanaka

这是IE9问题的[另一种解决方案]（https://dev59.com/i2Ik5IYBdhLWcg3wTccr#36137767） - Alberto

Answer 1

你可以在IE中使用伪元素来制作下拉箭头。

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

参考

• https://msdn.microsoft.com/zh-cn/library/windows/apps/hh465742.aspx
• 选择去掉下拉箭头
• 在IE中移除Select箭头

- Suresh Karia

Answer 2

Try this

.myclass::-ms-expand{display:none}
.myclass{
    -moz-appearance:none;
    -webkit-appearance:none;
    text-indent:0.01px;
    text-overflow:''; 
    background:url('https://www.holidayme.com/Images/uparrow.jpg') no-repeat 95% center #fff;
    border:1px solid #ccc; 
    width:100%;border-radius:0;
    color:#666;border-radius:3px;
    width:200px;
   padding:10px 5px;
}

查看该Fiddle以获取更多信息....

- Bhushan wagh