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

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

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

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

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

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

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

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

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

HTML:

<ul>
    <li>Red</li>
    <li>White</li>
    <li>Blue</li>
    <li>Green</li>
</ul>

CSS:

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 サイトの他の関連記事を参照してください。