ホームページ > ウェブフロントエンド > CSSチュートリアル > 異なるブラウザ間で選択オプション要素を確実にスタイル設定するにはどうすればよいですか?

異なるブラウザ間で選択オプション要素を確実にスタイル設定するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-17 17:16:10
オリジナル
931 人が閲覧しました

How Can I Reliably Style Select Option Elements Across Different Browsers?

さまざまなブラウザーでの選択オプション要素のスタイル設定

選択メニュー内のオプション要素のスタイル設定は、特に IE9 や Chrome などの古いブラウザーでは課題となる可能性があります。 。一部のブラウザでは CSS を使用したこれらの要素のスタイル設定がサポートされていますが、他のブラウザでは制限がある場合があります。

IE9 および Chrome でのオプション要素のスタイル設定の問題

提供されたコードは、クラス セレクターを使用したオプション要素:

1

2

3

4

5

6

option.red {

    background-color: #cc0000;

    font-weight: bold;

    font-size: 12px;

    color: white;

}

ログイン後にコピー

ただし、IE9 と Chrome では、このスタイル設定は失敗します。オプションの背景色に適用します。これは、WebKit ブラウザが、color と background-color を除き、オプション要素のスタイル設定を完全にはサポートしていないためです。

クロスブラウザ ソリューション

すべてのブラウザではないため、スタイル選択オプションに対する一貫したサポートを提供するには、より信頼性の高いアプローチは、包括的な CSS カスタマイズを可能にする代替 HTML 構造を利用することです。これは、選択メニューを ul (順序なしリスト) と li (リスト項目) の組み合わせに置き換えることによって実行できます:

HTML:

1

2

3

4

5

6

<ul>

    <li>Red</li>

    <li>White</li>

    <li>Blue</li>

    <li>Green</li>

</ul>

ログイン後にコピー

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

ul {

    display: flex;

    flex-direction: column;

    padding: 0;

}

 

li {

    list-style-type: none;

    padding: 10px;

    border-bottom: 1px solid #ccc;

}

 

li:hover {

    background-color: #cc0000;

}

ログイン後にコピー

このメソッドでは、CSS で外観を完全に制御できます。背景色やその他のスタイル オプションを含むオプション。

以上が異なるブラウザ間で選択オプション要素を確実にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート