在Firefox 22中隐藏默认选择箭头

Question

以下是这个答案/sf/answers/1239962741/

我尝试实现相同的解决方案,但它在我的Windows 7 Firefox 22上不起作用,这就是我得到的:

select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
    padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
     background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
     padding-right: 20px;
  }
}

编辑:这是一个jsfiddle http://jsfiddle.net/TGBEZ/1/

Answer 1

更新:此技巧从FF 30开始停止工作.到目前为止还没有其他修复.密切关注更新的全部要点.

如何删除<select>Firefox上的箭头:

-moz-appearance:none;不能单独工作.你需要添加一些text-indent和text-overflow.像这样:

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

实例:http://jsfiddle.net/joaocunha/RUEbp/1/

了解这个要点的详细信息:https://gist.github.com/joaocunha/6273016

Answer 2

这是 Firefox 的一个已知错误，不会很快甚至以后更正（请参阅此bugzilla）。

有一个纯 CSS/HTML 解决方法：

HTML：

<div class="styled">
    <select></select>
</div>

CSS：

div.styled {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

div.styled select {
    width: 115%;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    -webkit-appearance: none;
    border: none;
}

小提琴

这里的问题是您必须确保文本不会太大，否则它会覆盖图像。

此外，还有 javascript 解决方案。看一下customselect，一个 jQuery 插件，可以轻松创建您自己的选择。

另一个著名的插件：selected