Firefox 30 不再隐藏选择框箭头 [英] Firefox 30 is not hiding select box arrows anymore

问题描述

我一直使用技巧":

select {-moz-外观:无；文本缩进:0.01px；文字溢出:'';}

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

解决方案

更新

截至 2015 年 1 月，随着 Firefox 35 的发布，这现在再次起作用.请参阅下面的答案以获取历史参考.

---

---

---

背景

使用的黑客是这样的:

select {-moz-外观:无；文本缩进:0.01px；文字溢出:'';}

在我的测试中，在 FF 29 上，-moz-appearance:none; 没有影响.导致箭头框不出现的原因是后两行.它说任何溢出都会被一个空字符串替换，然后它使用 text-indent 导致 select 溢出.由于箭头框被渲染为单个元素，类似于单个字母，这导致它被空字符串替换.

发生了什么

Mozilla 的某人注意到，如果您在下拉select 上有填充，则箭头不会改变大小. 互联网，人们都在说同样的话，不幸的是.

现在怎么办

1. 我们有几个选择.您可以将叠加与 pointer-events:none 结合使用，以根据需要设置下拉菜单的样式:教程

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

我们还可以观看 在 Firefox 的 Bugzilla 上的请求，并希望有一天他们会创建一种非hacky的方式来做到这一点.请注意:不要去那里并开始发表关于想要它的评论.它被推迟的部分原因是人们大发雷霆.投票支持该问题可能会有所帮助.

---

2014 年 9 月更新

目前正在积极致力于 用于 Firefox.已经提交了2个补丁，已经等待审核一周了.最有可能的情况是，这使它成为 FF35 Aurora，我们有几周的时间在截止日期之前对其进行审查和批准(Firefox 的发布计划为 6 周).它也可能被推迟，甚至理论上可能会被提升"，这意味着在当前的 Aurora 和 Beta 版本中打补丁，以便更快地发布.

---

2014 年 10 月更新

现在如何正式解决!的种类.一个允许用户隐藏下拉箭头元素的补丁已经提交，并将与 一起提供Firefox 35 2015 年 1 月.

这将只允许用户隐藏箭头.设计风格是另一个问题，它已被分拆为另一个错误票strong> 以后会考虑.

---

2015 年 1 月更新

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

I have always used the "trick":

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

to do custom select boxes on FF but since version 30 is released this stopped working completely. I have tried to find if this was deprecated but couldn't find anything. Is there a workaround, or another method to replace this?

解决方案

Update

As of January 2015, this now works again with the release of Firefox 35. See the answer below for historical reference.

 

---

---

---

 

Background

The hack that was used is this:

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

In my testing, on FF 29, -moz-appearance:none; had no affect. What caused the arrow box to not appear was the second two lines. It said that any overflow is to be replaced by an empty string, and then it used text-indent to cause the select to overflow. Since the arrow box is rendered as a single element, similar to a single letter, this caused it to be replaced by the empty string.

What Happened

Someone at Mozilla noticed that if you have padding on a dropdown select, the arrow doesn't change size. According to the bug report, this issue has now been fixed:

The problem is that this has divorced the arrow from normal CSS rules. I've tried padding, text-indent, margin, white-space, text-wrap, and a few more, and I can't find anything that will affect it. Elsewhere around the internet, people are saying the same thing, unfortunately.

What Now

1. We have a few options. You can use an overlay combined with pointer-events:none to style the dropdown however you want: Tutorial

2. You can create a completely separate dropdown to replace select, using Javascript: Tutorial

We can also watch the request on Firefox's Bugzilla, and hope that someday they will create a non-hacky way to do this. PLEASE NOTE: Don't go there and start posting comments about wanting it. Part of the reason it's been so delayed is that people threw a fit. It may help to vote for the issue.

---

Update Sept. 2014

This is now being actively worked on for Firefox. 2 patches have been submitted and have been awaiting review for a week. Most probably scenario is that this makes it into FF35 Aurora, and we have a few weeks for it to get reviewed and approved before the cutoff date (Firefox operates on a 6 week release schedule). It could also be delayed, and it could even theoretically be "uplifted", meaning patched in the current Aurora and Beta versions, to get released sooner.

---

Update Oct. 2014

This how now been officially resolved! Kind of. A patch to allow users to hide the dropdown arrow element has been committed and will be shipped with Firefox 35 in January 2015.

This will only allow users to hide the arrow. To style it is another issue, which has been spun off into another bug ticket which will be considered in the future.

---

Update Jan. 2015

This has now been fixed! Firefox 35 came out on January 13, and you can now use -moz-appearance:none to remove the arrow.

这篇关于Firefox 30 不再隐藏选择框箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！