试试这个，对我有用，

<style> select{ border: 0 !important; /*Removes border*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-overflow:''; text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /*Removes default arrow from firefox*/ } select::-ms-expand { display: none; } .select-wrapper { padding-left:0px; overflow:hidden; } </style> <div class="select-wrapper"> <select> ... </select> </div>

你不能隐藏，但是使用overflow hidden你可以让它消失。

试试这个，对我有用，

<style> select{ border: 0 !important; /*Removes border*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-overflow:''; text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ""; /*Removes default arrow from firefox*/ } select::-ms-expand { display: none; } .select-wrapper { padding-left:0px; overflow:hidden; } </style> <div class="select-wrapper"> <select> ... </select> </div>

你不能隐藏，但是使用overflow hidden你可以让它消失。

正如我在IE上删除选择箭头中回答的那样

如果你想使用类和伪类:

.simple-control是CSS类

:disabled为伪类

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

只是想把这个话题讲完。 很明显，这在IE9中是行不通的，但是我们可以通过一些css技巧来实现。

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

从选择中删除下拉箭头的简单方法

选择{ /*为Firefox */ -moz-appearance:没有; /* for Chrome */ -webkit-appearance:没有; ｝ /*对于IE10 */ 选择:-ms-expand { 显示:没有; ｝ <选择> <选项> 2000 > < /选项 <选项> 2001 > < /选项 <选项> 2002 > < /选项 < /选择>

有一个叫做DropKick.js的库，它用HTML/CSS替换了正常的选择下拉列表，这样你就可以用javascript完全控制它们。http://dropkickjs.com/