试试这个，对我有用，

<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你可以让它消失。

在我的情况下(最新的Mozilla版本94.0.2)，

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

不工作，但检查css后，我找到了解决方案:

箭头包含在background-image中，所以我通过添加background-image来解决它:none;

我建议使用所有的规则

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
} 

试试这个:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin: http://jsbin.com/aniyu4/2/edit

如果你使用Internet Explorer:

select {
    overflow:hidden;
    width: 120%;
}

或者你可以使用Choosen: http://harvesthq.github.io/chosen/

只是想把这个话题讲完。 很明显，这在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;
}

前面提到的解决方案适用于chrome，但不适用于Firefox。

我发现了一个解决方案，在Chrome和Firefox(不是IE)都很好。将以下属性添加到SELECTelement的CSS中，并根据需要调整margin-top。

选择{ -webkit-appearance:没有; -moz-appearance:没有; indent: 1 px; 文本溢出:“; ｝ <选择> <选项> > < /选项之一 <选项> < /两个选项> <选项> 3 < /选项> < /选择>

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}