无法获得原始选择下拉箭头在Mozilla中消失

Question

我已经制作了一个自定义选择框，带有自定义下拉箭头，它在Google Chrome和Safari中看起来不错，但在Mozilla（奇怪地）和Internet Explorer（不那么奇怪）中，原始箭头仍然存在，以及新的。

以下是CSS样式：

    .sb2_panes select {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 20px;
        margin: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background: url(img/search_arrow.png) no-repeat right #f8f8f8;
        color: #888;
        border: none;
        outline: none;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: normal;
        appearance: normal;
        cursor: pointer;
    }

以下是Google Chrome中的内容：

以下是Mozilla的内容：

感谢。

Answer 1

正如Gunnar所说，这仍然是Firefox中的一个错误（https://bugzilla.mozilla.org/show_bug.cgi?id=649849）。

可能的解决方法是将select宽度设置为大于100％并应用overflow: hidden。

select {
    overflow: hidden;
    width: 125%;
}

或者您可以使用JavaScript。

Answer 2

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

此代码适用于FF