更新

Question

我正在尝试使用CSS设置<select>元素的下拉箭头，它在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;
}

精美呈现as seen here

按照这种逻辑，我必须做的唯一让它在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％，唯一的问题是默认下拉箭头不会消失，并且保持在背景图像的顶部as seen here

看起来-moz-appearance: button;对<select>元素不起作用。此外，-moz-appearance: none;无法删除默认下拉箭头。

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

更新

2014年12月11日：停止发明新黑客。在4年半之后，-moz-appearance:none自Firefox 35开始起作用。尽管moz-appearance:button仍然存在，但无论如何都不需要使用它。 Here is a very basic working example.

2014年4月28日：上述css hack工作了几个月，但自2014年4月初以来，这个错误在所有平台上每晚都会重新进入Firefox 31.0.a1。

Answer 1

更新： 这已在Firefox v35中修复。有关详细信息，请参阅full gist。

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

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

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

长话短说，通过将它向右推一点，溢出就会摆脱箭头。很整洁，呵呵？

我刚刚写的关于this gist的更多细节。在Ubuntu，Mac和Windows上进行了测试，所有这些都是最近的Firefox版本。

Answer 2

这是伙计们！的 FIXED！

等等：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

或workaround

对于那些想知道：

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


首先，因为臭虫中含有大量恶意垃圾邮件，所以它会为任何被分配给它的人创造一个敌对的工作场所。

其次，有能力做到这一点（包括重写）的人暂时被分配到另一个项目（b2g），并且在该项目接近完成之前没有时间。

第三，即使那个人有时间，也不能保证这将是一个优先事项，因为尽管webkit有这个，它打破了应该如何工作的规范（这是我被告知，我不亲自了解规格）

现在看https://wiki.mozilla.org/B2G/Schedule_Roadmap;）

页面不再存在且错误尚未修复，但an acceptable workaround来自JoãoCunha，你们现在可以感谢他了！

Answer 3

要删除默认下拉箭头，请使用：

-moz-appearance: window;

Answer 4

尝试设置不透明度：0;您的选择元素将不可见，但单击它时可以看到选项。

Answer 5

在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。

Answer 6

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

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

或

select {
    -moz-appearance: treeview;
}

他们只会将您放入的任何箭头背景图像隐藏到自定义样式的选择元素中。所以你得到一个标准浏览器箭头，而不是浏览器箭头和你自己的自定义箭头的可怕组合。

Answer 7

虽然您还无法让Firefox删除下拉箭头（请参阅MatTheCat的帖子），但您可以隐藏“风格化”的背景图像，以免在Firefox中显示。

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

这会将它置于框架之外，为您保留默认选择框箭头 - 同时将风格化版本保留在Webkit中。

Answer 8

添加时它正在工作：

选择{width：115％}

隐藏<select>元素</select>的下拉箭头的正确“-moz-appearance”值是什么

更新

8 个答案: