CSS 隐藏 <select> 元素的下拉箭头的正确“-moz-appearance”值是多少
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6787667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element
提问by Tony
I'm trying to style the dropdown arrow of a <select>element with CSS only , it works perfectly in Chrome/Safari:
我正在尝试<select>仅使用 CSS为元素的下拉箭头设置样式，它在 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;
}
Which renders beautifully as seen here
如这里所见，呈现精美
By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-*stuff as -moz-*:
按照这个逻辑，要让它在 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;
It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here
它适用于 99%，唯一的问题是默认下拉箭头不会消失，而是停留在背景图像的顶部，如此处所示
It looks like -moz-appearance: button;does not work for a <select>element. Also -moz-appearance: none;has no effect to remove the default dropdown arrow.
它看起来-moz-appearance: button;不适用于<select>元素。也-moz-appearance: none;无法删除默认下拉箭头。
So what is the correct value for -moz-appearanceto remove the default dropdown arrow?
那么-moz-appearance删除默认下拉箭头的正确值是多少？
Updates:
更新：
December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:noneis starting to work since Firefox 35. Although moz-appearance:buttonis still broken, you don't need to use it anyway. Here is a very basic working example.
2014 年 12 月 11 日：停止发明新的黑客。4年半后，-moz-appearance:none从Firefox 35开始工作。虽然moz-appearance:button还是坏了，反正你用不着。这是一个非常基本的工作示例。
April 28, 2014: The mentioned css hackworked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.
2014 年 4 月 28 日：所提到的css hack工作了几个月，但自 2014 年 4 月开始，此错误正在所有平台上的 Firefox 31.0.a1 Nightly 中蔓延。
采纳答案by MatTheCat
This is it guys! FIXED!
这是伙计们！固定的！
Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
等等看：https: //bugzilla.mozilla.org/show_bug.cgi?id=649849
or workaround
或解决方法
For those wondering:
对于那些想知道的人：
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.
Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.
Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)
首先，由于该漏洞包含大量恶意垃圾邮件，因此它为任何被分配到此问题的人创造了一个敌对的工作场所。
其次，有能力做到这一点（包括重写）的人暂时被分配到另一个项目（b2g）并且在该项目接近完成之前没有时间。
第三，即使那个人有时间，也不能保证这将是一个优先事项，因为尽管 webkit 有这个，它打破了应该如何工作的规范（这是我被告知的，我个人不知道规格）
Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap;)
现在见https://wiki.mozilla.org/B2G/Schedule_Roadmap;)
The page no longer exists and the bug hasn't be fixed but an acceptable workaroundcame from Jo?o Cunha, you guys can thank him for now!
该页面不再存在，错误尚未修复，但Jo?o Cunha 提出了一个可接受的解决方法，你们现在可以感谢他了！
回答by Jo?o Cunha
Update:this was fixed in Firefox v35. See the full gistfor details.
更新：此问题已在 Firefox v35 中修复。有关详细信息，请参阅完整要点。
== how to hide the select arrow in Firefox==
==如何在 Firefox 中隐藏选择箭头==
Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indentand text-overflow. It is pure CSS and requires no extra markup.
刚刚想出如何做到这一点。诀窍是混合使用-prefix-appearance,text-indent和text-overflow。它是纯 CSS，不需要额外的标记。
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?
长话短说，通过将它向右推一点，溢出就摆脱了箭头。很整洁吧？
More details on this gistI just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.
关于我刚刚写的这个要点的更多细节。已在 Ubuntu、Mac 和 Windows 上进行测试，均使用最新的 Firefox 版本。
回答by RD.
To get rid of the default dropdown arrow use:
要摆脱默认的下拉箭头，请使用：
-moz-appearance: window;
回答by Josh Byvelds
Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.
尝试放置 opacity:0; 您的选择元素将不可见，但当您单击它时，选项将可见。
回答by Joshua Davis
In Mac OS -moz-appearance: window;will remove the arrow accrding to the MDN docs here: https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance. Tested on Firefox 13 on Mac OS X 10.8.2. Also see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21.
在 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。
回答by El Guapo
It is worth trying these 2 options below while we're still waiting for the fix in FF35:
当我们仍在等待 FF35 中的修复时，值得尝试以下这两个选项：
select {
-moz-appearance: scrollbartrack-vertical;
}
or
或者
select {
-moz-appearance: treeview;
}
They will just hide any arrow background image you have put in to custom style your select element. So you get a bog standard browser arrow instead of a horrible combo of both browser arrow and your own custom arrow.
他们只会隐藏您在自定义样式中放入选择元素的任何箭头背景图像。因此，您将获得一个沼泽标准浏览器箭头，而不是浏览器箭头和您自己的自定义箭头的可怕组合。
回答by mattisahuman
While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.
虽然您还不能让 Firefox 删除下拉箭头（请参阅 MatTheCat 的帖子），但您可以隐藏您的“风格化”背景图像，使其不显示在 Firefox 中。
-moz-background-position: -9999px -9999px!important;
This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.
这会将其放置在框架外，为您保留默认的选择框箭头 - 同时在 Webkit 中保留风格化版本。
回答by sam
it is working when adding :
添加时它正在工作：
select { width:115% }
选择 { 宽度：115% }
