Firefox 30不再隐藏选择框箭头 [英] Firefox 30 is not hiding select box arrows anymore
问题描述
我一直使用技巧：
select {
-moz-appearance：none;
text-indent：0.01px;
text-overflow：'';
}
在FF上执行自定义选择框，但自从30版本发布后，完全。我试图找到如果这是被弃用，但找不到任何东西。是否有解决方法或替代此方法的其他方法？
更新
截至2015年1月，现在可以再次使用Firefox 35版本。请参阅下面的答案以获取历史参考。
背景
使用的黑客是：
select {
-moz-appearance：none;
text-indent：0.01px;
text-overflow：'';
}
在我的测试中，在FF 29， -moz -appearance：none; 没有影响。什么导致箭头框不出现是第二个两行。它说任何溢出将被一个空字符串替换，然后它使用text-indent导致 select 溢出。由于箭头框被渲染为单个元素，类似于单个字母，这导致它被替换为空字符串。
发生了什么
有人在Mozilla注意到，如果你在下拉菜单选择填充，箭头不会改变大小。 互联网 ，人们都在说很不幸。
现在
我们还可以在Firefox的Bugzilla上观看 请求 ，并希望有一天他们会创建一个非黑客的方法来做到这一点。 请注意：不要去那里，开始发布有关想要它的评论。部分原因被推迟的原因是人们投入了适合。它可能有助于 投票支持
$ b
2014年9月更新
$ b现在是 积极工作 。 2个补丁已提交，并已等待审查一个星期。最有可能的情况是，这使它成为FF35 Aurora，我们有几个星期的时间在截止日期之前审查和批准（Firefox操作6周发布计划）。它也可能被延迟，甚至在理论上可能是uplifted，意味着在当前的Aurora和Beta版本中修补，以更快地发布。
2014年10月更新
现在 正式解决 ！有点。允许用户隐藏下拉箭头元素的修补程序已提交，并将随 Firefox 35 。
这将只允许用户隐藏箭头。要塑造风格，这是另一个问题，已经转化为 另一个错误机票 ，将在未来考虑。
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
We have a few options. You can use an overlay combined with
pointer-events:noneto style the dropdown however you want: TutorialYou 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屋！
