CSS 在 Firefox 中设置选择元素的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9620404/
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
Styling a select element in Firefox
提问by Enrique Moreno Tent
Im trying to style a <select>in firefox. In chrome I made it with:
我试图<select>在 Firefox 中设置样式。在 chrome 中，我是用以下方法制作的：
-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
But on firefox I cant seem to be able to get the same result with
但是在 Firefox 上我似乎无法获得相同的结果
-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
Any ideas? Thanks.
有任何想法吗？谢谢。
采纳答案by Luca Detomi
回答by Andriy Budzinskyy
Looks like this is bug on Firefox: -moz-appearance:none with select element. See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
看起来这是 Firefox 上的错误：-moz-appearance:none 与 select 元素。有关更多信息，请参阅此错误报告：https: //bugzilla.mozilla.org/show_bug.cgi?id=649849
回答by Jo?o Cunha
Exact duplicate as this one: https://stackoverflow.com/a/18317228/1411163
与此完全相同：https: //stackoverflow.com/a/18317228/1411163
Same answer:
同样的答案：
Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
刚刚想出如何从 Firefox 中删除选择箭头。诀窍是混合使用 -prefix-appearance、text-indent 和 text-overflow。它是纯 CSS，不需要额外的标记。
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
在 Windows 8、Ubuntu 和 Mac、最新版本的 Firefox 上测试。
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
实例：http: //jsfiddle.net/joaocunha/RUEbp/1/
More on the subject: https://gist.github.com/joaocunha/6273016
有关该主题的更多信息：https: //gist.github.com/joaocunha/6273016
回答by sstur
EDIT[2]: Since @jo?o-cunha's awesome trickstopped working in FF30, see this new workaround: http://jsfiddle.net/sstur/2EZ9f/(based on @keska's display:flex fix and some text-shadow magic)
编辑 [2]：由于@jo?o-cunha 的绝妙技巧在 FF30 中停止工作，请参阅此新解决方法：http: //jsfiddle.net/sstur/2EZ9f/（基于 @keska 的 display:flex fix 和一些 text-shadow魔法）
EDIT: This can be done using pure CSS, as demonstrated here: http://jsfiddle.net/sstur/fm5Jt/
编辑：这可以使用纯 CSS 来完成，如下所示：http: //jsfiddle.net/sstur/fm5Jt/
This will style it in Chrome, Firefox, IE10+ and will gracefully degrade in old IE and other legacy browsers. It uses various vendor-specific workarounds including -webkit-appearance: noneas you mentioned.
这将在 Chrome、Firefox、IE10+ 中设置样式，并在旧的 IE 和其他旧浏览器中优雅地降级。它使用各种特定于供应商的解决方法，包括-webkit-appearance: none您提到的。
回答by svestka
You can try to use different value for -moz-appearanceproperty. For example -moz-appearance: toolbox;works fine for me.
您可以尝试为-moz-appearance属性使用不同的值。例如，-moz-appearance: toolbox;对我来说效果很好。
Full list of values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
可以在此处找到完整的值列表：https: //developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
