検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML で選択した オプションの背景色を変更するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-07 01:20:13219ブラウズ

How Can I Change the Background Color of a Selected <select> HTML のオプション? HTMLのオプション? " />

HTML の CSS スタイル <select> 選択されたオプションの背景色

HTML では、<select> 要素はドロップダウン リストの作成に使用されますデフォルトでは、オプションが選択されると背景色が青になります。ただし、この色をカスタマイズすることもできます。 CSS.

選択された <select> オプションの背景色をスタイル設定するための CSS プロパティ「selected-color」は存在しません。このタスクには純粋な CSS だけでは十分ではない可能性があります。

JavaScript ソリューション

より実現可能なアプローチには、HTML、CSS、 

<select>

上記の HTML コードでは、事前定義された背景色を持つ <select> 要素を作成しました。

select {
    color: black; /* Default color for options */
}

この CSS は、<select> 内のすべての 

var sel = document.getElementById('mySelect');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
    selected.style.color = 'red';
}, false);

この Javascript コードでは、オプションがクリックされると、イベント リスナーを <select> 要素に追加します。要素を作成し、その色を白に設定します。次に、選択したオプションの色を赤に設定します。

HTML、CSS、JavaScript を組み合わせることで、選択した <select> のデフォルトの青色の背景色をオーバーライドできます。オプションを選択して好みに合わせてカスタマイズします。

以上がHTML で選択した