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

Question

根据这个答案 https://dev59.com/sm025IYBdhLWcg3wl3K-#17713753

我也尝试了同样的解决方案，但它在我的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/

- Or Weinberger

---

我认为你需要采用JavaScript解决方案... - Brewal

@Brewal，你能详细说明一下吗？ - Or Weinberger

Answer 1

更新：自Firefox 30版本以后，此技巧已经无效。目前没有其他解决方案，请关注完整的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

- João Cunha

---

这个人应该得到一枚奖牌，这个回答需要500个赞。在互联网上找了一个多小时，这是我找到的唯一可行的解决方案。 - Niels Keurentjes

但在安卓的FF浏览器上无法正常工作。请使用text-indent: 5px来解决。 - EAndreyF

@EAndreyF：“Firefox for Android需要将箭头的整个宽度作为文本缩进。这意味着您需要将其设置为至少5px，但要小心，因为Firefox似乎会在<select>元素上将text-indent值加倍。”

• https://gist.github.com/joaocunha/6273016

- João Cunha

很抱歉，但在我的 Firefox 版本 30.0 中无法隐藏它。如果您有解决方案，请告诉我吗？ - Sandy

Answer 2

这是Firefox已知的一个bug，不会很快得到修复，甚至可能以后都不会（参见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插件，可以轻松创建自己的选择器。

另一个著名的插件：chosen

- Brewal

Answer 3

我已经在Firefox 30+中使用以下代码实现了此功能：

-moz-appearance: textfield;

- Adam Prendergast

Answer 4

现在在FF 30中，使用-moz-appearance: window而不是none似乎正常工作。

- Fyb3roptik

Answer 5

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

自定义选择下拉箭头无法点击

- Or Weinberger