如何在Firefox 30+中隐藏<select>箭头？

Question

这个hack曾经在<= Firefox 29中工作以删除<select>箭头:

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

它不再适用于Firefox 30.箭头又回来了.

有谁知道达到同样效果的方法？

注1:我对使用另一个元素覆盖箭头的解决方案或嵌套select元素并执行溢出的解决方案不感兴趣:隐藏.

注2:我尝试了所有-moz-appearance可能性.它们要么添加我无法覆盖的默认样式,要么不允许自定义样式(特别是边框和背景),或者箭头仍然可见.

更新:它在Firefox 35(目前处于测试版)中再次使用-moz-appearance: none,使其在所有最新浏览器(在IE11,Firefox 35b,Chrome 39,Safari 8 中测试)中保持一致:http://jsfiddle.net/phd5pu9x/

Answer 1

将选择放入另一个具有的容器中overflow: hidden;，使选择比容器宽。如果您想要边框，请将其添加到容器中。

一个例子是本页底部的选择： https: //mozillians.org/en-US/