如何删除选择框上的箭头（Firefox）答案

【问题标题】：How to remove arrow on selectbox (Firefox)如何删除选择框上的箭头（Firefox）
【发布时间】：2013-05-24 10:26:05
【问题描述】：

我已经设置了我的选择框的样式，但我仍然可以在 Firefox 中看到我的选择框中的箭头，我已经设置了 css：

background:transparent;
content:'';
apperiance:none;

这在 Chrome 上有效，但在 Firefox 上我仍然看到默认箭头，是否也可以在 Firefox 上删除它？

【问题讨论】：

-moz-外观：无；这是您问题的完整答案stackoverflow.com/questions/5748351/…

标签： html css google-chrome firefox browser

【解决方案1】：

不幸的是，目前还没有一种跨浏览器兼容的方式来使用 CSS 设置表单元素的样式：设计师通常无法控制它们的外观/行为，因此表单元素的样式是出了名的困难。许多浏览器根本不允许您设置它们的样式！

如果您需要在所有浏览器中获得一致的外观，唯一的方法是使用 JavaScript 将视图中的表单元素替换为风格化的 HTML 元素。

这篇文章列出了一些可供您选择的选项：http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

【讨论】：

【解决方案2】：

对我有用的技巧是使选择宽度超过 100% 并应用溢出：隐藏

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

The answer from here : How to remove the arrow from a tag in Firefox

【讨论】：

【解决方案3】：

使用pointer-events 属性。

这里的想法是在原生下拉箭头上覆盖一个元素（以创建我们的自定义下拉箭头），然后在其上禁止指针事件。 [见this post]

这是一个使用此方法的工作 FIDDLE。

另外，在this SO answer 中，我更详细地讨论了这个和另一种方法。

【讨论】：

在小提琴中，我用自定义箭头替换默认箭头 - 您可以使用相同的方法通过将我的自定义箭头替换为白色背景来删除箭头（比如说)

【解决方案4】：

这应该会删除 Chrome、Firefox、Safari 和 IE10 中选择中的箭头。

.poa-select {
  -moz-appearance: none; 
  -webkit-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
}
.poa-select::-ms-expand {
  display: none;
}

来自here 和here 的想法。

【讨论】：