在Firefox中设计选择元素

Question

我试图在Firefox中设计<select>。在铬我做它：

-webkit-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

但在Firefox我不能似乎能够得到与

-moz-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

任何想法相同的结果？谢谢。

Answer 1

由于火狐35“-moz-appearance:none”你已经在你的代码中写道，根据需要最后取出箭头按钮。

自从该版本以来，这是一个bug解决。

Answer 2

看起来像这是Firefox的错误：-moz-appearance：没有选择元素。 更多信息，请参阅此bug报告：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Answer 3

EDIT [2]：由于@若昂 - 库尼亚的awesome trick停在FF30的工作，看到这个新的解决方法：http://jsfiddle.net/sstur/2EZ9f/（基于@ keska的显示屏上：柔性修复和一些文字阴影魔法）

编辑：这可以使用纯CSS来完成，这表现在这里：http://jsfiddle.net/sstur/fm5Jt/

这将是样式在Chrome，火狐，IE10 +和老IE等旧版浏览器将优雅降级。它使用各种供应商特定的解决方法，包括-webkit-appearance: none，正如您所提到的。

Answer 4

您可以尝试对-moz-appearance属性使用不同的值。例如 -moz-appearance: toolbox;适合我。

全部值的列表可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

Answer 5

完全重复，因为这一个：https://stackoverflow.com/a/18317228/1411163

相同的答案：

只是想出了如何从Firefox中选择箭头。诀窍是使用-prefix-appearance，text-indent和text-overflow的混合。它是纯CSS，不需要额外的标记。

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

在Windows 8，Ubuntu和Mac上测试最新版本的Firefox。

活生生的例子：http://jsfiddle.net/joaocunha/RUEbp/1/

更多关于这个问题的：https://gist.github.com/joaocunha/6273016