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

不需要黑客或溢出。IE中有一个下拉箭头的伪元素:

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

您无法使用全功能的跨浏览器支持来实现这一点。

试着取一个50像素的div，在它的右边浮动一个你想要的下拉图标

在这个div中，添加宽度为55像素的select标签(大于容器宽度)

我想你会得到你想要的。

如果你不想在右边放置任何图标，只需要执行所有的步骤，除了在右边浮动图像。在选择标签的焦点上设置outline:0。就是这样

在我的情况下(最新的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;
} 

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

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

正如我在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;
}