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

Question

按照此回答https://stackoverflow.com/a/17713753/407943

我尝试过实现相同的解决方案，但它在我的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起停止工作。到目前为止还没有其他解决办法。请密切注意full gist的更新。

---

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

-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;
}

<强> The Fiddle

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

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

另一个着名的插件：chosen

Answer 3

这是我在FF / IE / Chrome上真正起作用的唯一解决方案：

Customized select dropdown arrow not clickable

Answer 4

使用-moz-appearance：window而不是none似乎现在在FF 30中工作