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

【问题标题】：Hiding default select arrow in Firefox 22在 Firefox 22 中隐藏默认选择箭头
【发布时间】：2013-07-20 21:58:39
【问题描述】：

按照这个答案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/

【问题讨论】：

我认为您将不得不使用 javascript 解决方案...
@Brewal 你能详细说明一下吗？

标签： css firefox

【解决方案1】：

我在 Firefox 30+ 中使用：

-moz-appearance: 文本域；

【讨论】：

【解决方案2】：

更新：这个技巧从 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

【讨论】：

这个人需要一枚奖牌，这个答案有 500 个赞。我在一个多小时内在互联网上找到的唯一可行的解决方案。
但它在 Android 上的 FF 中不起作用。使用 text-indent: 5px 修复它
@EAndreyF：“Firefox for Android 需要箭头的整个宽度作为文本缩进。这意味着您需要将其设置为至少 5px，但要小心，因为 Firefox 似乎将文本加倍-
很抱歉，但它没有隐藏在我的 Firefox 30.0 版中。如果您有任何解决方案，请告诉我？

【解决方案3】：

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

【讨论】：

【解决方案4】：

这是在 FF/IE/Chrome 上真正适合我的唯一解决方案：

Customized select dropdown arrow not clickable

【讨论】：

【解决方案5】：

这是 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

【讨论】：