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 に答える