如何从下拉列表（选择元素）中删除默认箭头图标？

Question

我想从 HTML <select> 元素中删除下拉箭头。例如：

 <select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

如何在 Opera、Firefox 和 Internet Explorer 中执行此操作？

原文由 user2301515 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你使用 TailwindCSS 你可以利用 appearance-none 类。

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

原文由 Félix Paradis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

无需破解或溢出。 IE 上的下拉箭头有一个伪元素：

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

原文由 nrutas 发布，翻译遵循 CC BY-SA 4.0 许可协议