4

選択メニューでこの問題に遭遇しました。これは、CSS と Jquery を使用してスタイルを設定することです。今では、この結果を得ることができました。これは本当に気に入っています。 ここに画像の説明を入力

今のところ、mozilla、opera、chrome、IE7+ で完璧に動作します。

これは私が現時点で持っているソースです：

HTML:

            <select class="styled" name="">
                <option>Select title</option>
                <option>Mr.</option>
                <option>Mrs.</option>
                <option>Miss.</option>
            </select>

CSS:

select {
    border: 1px solid #d6d8db;
    background-color: #ecedee;
    text-transform: uppercase;
    color: #47515c;
    padding: 12px 10px 12px 10px;
    width: auto;
    cursor: pointer;
    margin-bottom: 10px;
}
select > option {
    text-transform: uppercase;
    padding: 5px 0px;
}
.customSelect {
    border: 1px solid #d6d8db;
    background-color: #ecedee;
    text-transform: uppercase;
    color: #47515c;
    padding: 12px 10px 12px 10px;
    margin-bottom: 10px;
}
.customSelect.changed {
    background-color: #f0dea4;
}   
.customSelectInner {
    background:url(../images/select_arrows.png) no-repeat center right;
}

jQuery は、プラグインと制御コードの 2 つの部分で構成されています。

これは、作成したばかりの FIDDLE で表示できます: http://jsfiddle.net/s6jGW/1/

左側に「外部リソース」があることに注意してください。

達成したいこと

  1. ドロップダウンは、画像のように見えるようにスタイルを設定したいです（つまり、-高さ-パディング-ホバー時のようなオプションを意味します： ここに画像の説明を入力

  2. 「SELECT TITLE」を選択オプションとして使用したくありません。選択ボックスのタイトルのみにする必要があります。このフィドルでは、それがオプションでもあることがわかります。http://jsfiddle.net/s6jGW/1/

  3. おそらく最も重要なのは、クロス ブラウザ ソリューションを探していることです。

前もって感謝します

4

1 に答える 1

11

クロスブラウザ機能の選択メニューをスタイリングする正しい方法

select 要素と option 要素をスタイルするためのクロスブラウザーの方法はありません。それらを独自の HTML ベースのコントロールに置き換える必要があります。

ただし、強く主張したい (そしておそらく古いブラウザーをあきらめたい) 場合は、次のリンクが役立つ可能性があります。

于 2013-03-19T19:02:08.757 に答える