html - Firefox 30 不再隐藏选择框箭头

Question

我一直用的“绝招”:

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

在 FF 上做自定义选择框，但自版本 30 发布以来，这完全停止工作。我试图找出是否已弃用但找不到任何东西。是否有解决方法或其他替代方法？

Answer 1

更新

自 2015 年 1 月起，随着 Firefox 35 的发布，这又可以正常工作了。请参阅下面的答案以获取历史引用。

---

---

---

背景

使用的 hack 是这样的:

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

在我的测试中，在 FF 29 上，-moz-appearance:none; 没有任何影响。导致箭头框没有出现的是后两行。它说任何溢出都要用空字符串替换，然后它使用文本缩进导致 select 溢出。由于箭头框被呈现为单个元素，类似于单个字母，这导致它被空字符串替换。

发生了什么

Mozilla 的某人注意到，如果您在下拉列表 select 上填充，箭头不会改变大小。 According to the bug report ，此问题现已修复:

问题是这使箭头脱离了正常的 CSS 规则。我试过 padding、text-indent、margin、white-space、text-wrap ，还有一些，我找不到任何会影响它的东西。 Elsewhere around the internet ，不幸的是，人们在说同样的话。

现在怎么办

1. 我们有几个选择。您可以使用叠加层和 pointer-events:none 来根据需要设置下拉菜单的样式:Tutorial

2. 您可以使用 Javascript 创建一个完全独立的下拉列表来替换 select:Tutorial

我们还可以观看 request on Firefox's Bugzilla ，并希望有一天他们会创造一种非 hacky 的方式来做到这一点。 请注意:不要去那里并开始发表关于想要它的评论。它被推迟的部分原因是人们大发雷霆。这可能有助于vote for the issue .

---

2014 年 9 月更新

现在是actively worked on对于火狐。提交了2个patch，等了一周的review。最有可能的情况是它进入了 FF35 Aurora，我们有几周的时间在截止日期之前对其进行审查和批准(Firefox 按照 6 周的发布时间表运行)。它也可能会被延迟，甚至理论上可能会被“提升”，这意味着在当前的 Aurora 和 Beta 版本中打补丁，以便更快地发布。

---

2014 年 10 月更新

这是怎么回事 officially resolved !有点儿。允许用户隐藏下拉箭头元素的补丁已经提交并将与 Firefox 35 一起发布。 2015 年 1 月。

这将只允许用户隐藏箭头。设计它的样式是另一个问题，它已被拆分到 another bug ticket 中。这将在未来考虑。

---

2015 年 1 月更新

现在已经修复了! Firefox 35 1 月 13 日发布，您现在可以使用 -moz-appearance:none 删除箭头。