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

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

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

这就是伙计们！ 已修复！

---

拭目以待：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ão Cunha，你们现在可以感谢他！

Answer 3

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

-moz-appearance: window; 

Answer 4

试着把 opacity:0;您的选择元素将不可见，但当您单击它时选项将可见。

Answer 5

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

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

或者

select {
    -moz-appearance: treeview;
}

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

Answer 6

在 Mac OS X 中，-moz-appearance: window; 将根据MDN 文档删除箭头appearance (-moz-appearance, -webkit-appearance)。

它在 Firefox 13 上的 Mac OS X v10.8.2 (Mountain Lion) 上进行了测试。另请参阅：649849 - Make -moz-appearance:none on a combobox remove the dropdown button。

Answer 7

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

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

这会将其定位在框架之外，为您留下默认的选择框箭头 - 同时在 Webkit 中保留风格化版本。

Answer 8

添加时它正在工作：

选择 { 宽度：115% }