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

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

试试这个，对我有用，

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

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

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

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

我想你会得到你想要的。

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

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;

}

如果你使用TailwindCSS 您可以利用无外观类。

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

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