我正在尝试<select>仅使用CSS设置元素的下拉箭头的样式，它在Chrome / Safari中非常有效：

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

如在这里看到的那样呈现精美

按照这种逻辑，我要做的唯一使它在Firefox中工作的就是将所有-webkit-*内容添加为-moz-*：

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

它适用于99％，唯一的问题是默认下拉箭头不会消失，而是停留在背景图片的顶部，如下所示

似乎-moz-appearance: button;不适用于某个<select>元素。也-moz-appearance: none;没有影响到删除默认的下拉箭头。

那么-moz-appearance，删除默认下拉箭头的正确值是什么？

更新：

2014年12月11日：停止发明新的hack。经过4年半的时间，-moz-appearance:none从Firefox 35开始可以使用。尽管moz-appearance:button它仍然坏了，但是您仍然不需要使用它。这是一个非常基本的工作示例。

2014年4月28日：提到的CSS hack工作了几个月，但自2014年4月开始以来，此漏洞在所有平台上每晚都重新出现到Firefox 31.0.a1中。

就是这个！固定！

等待并查看：https : //bugzilla.mozilla.org/show_bug.cgi?id=649849

或解决方法

对于那些想知道的人：

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

首先，由于该错误中包含许多恶意垃圾邮件，因此它会为分配给此错误的任何人创建一个恶意工作场所。

其次，有能力执行此操作（包括重写）的人员已暂时分配到另一个项目（b2g），并且没有时间直到该项目接近完成。

第三，即使该人再次有时间，也无法保证这将是优先事项，因为尽管webkit拥有优先权，但它违反了应该如何工作的规范（这是我被告知的，我个人没有了解规格）

现在请参阅https://wiki.mozilla.org/B2G/Schedule_Roadmap ;）

该页面不再存在，并且错误尚未修复，但是JoãoCunha提供了可以接受的解决方法，你们现在可以感谢他！

更新：在Firefox v35中已修复。有关详细信息，请参见完整要点。

==如何在Firefox中隐藏选择箭头==

只是想出了怎么做。诀窍是使用的混合-prefix-appearance，text-indent和text-overflow。它是纯CSS，不需要额外的标记。

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

长话短说，通过将其稍微向右推动，溢流摆脱了箭头。很整洁吧？

有关更多详细信息 我刚刚写的这个要点的。在Ubuntu，Mac和Windows上进行了测试，所有版本都使用了最新的Firefox。

要摆脱默认的下拉箭头，请使用：

-moz-appearance: window; 

尝试将不透明度：0; 您的select元素将是不可见的，但是在您单击该选项时这些选项将是可见的。

在Mac OS中，-moz-appearance: window;将在此处删除MDN文档的箭头：https : //developer.mozilla.org/en-US/docs/CSS/-moz-appearance。在Mac OS X 10.8.2的Firefox 13上进行了测试。另请参阅：https : //bugzilla.mozilla.org/show_bug.cgi?id=649849#c21。

当我们仍在等待FF35中的修复程序时，值得尝试以下两个选项：

select {
    -moz-appearance: scrollbartrack-vertical;
}

要么

select {
    -moz-appearance: treeview;
}

它们只会隐藏您已放入自定义样式的select元素的任何箭头背景图像。因此，您得到的是标准浏览器箭头，而不是浏览器箭头和您自己的自定义箭头的可怕组合。

尽管您仍无法让Firefox删除下拉箭头（请参见MatTheCat的帖子），但是您可以隐藏“风格化”的背景图片，使其不会在Firefox中显示。

-moz-background-position: -9999px -9999px!important;

这将使其偏离框架，使您拥有默认的选择框箭头-同时将样式化版本保留在Webkit中。

它在添加时起作用：

选择{width：115％}