2

我制作了一个自定义选择框,带有一个自定义下拉箭头,它在 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 中的样子:

这是它在 Google Chrome 中的样子:

这是它在 Mozilla 中的样子:

这是它在 Mozilla 中的样子:

谢谢。

4

2 回答 2

5

正如 Gunnar 所提到的,这仍然是 Firefox 中的一个错误(https://bugzilla.mozilla.org/show_bug.cgi?id=649849)。

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

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

或者你可以使用 JavaScript。

于 2012-10-02T15:54:02.027 回答
1
select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

此代码适用于 FF

于 2013-10-11T12:37:38.293 回答