HTML ` 要素で選択したオプションの背景色を変更するにはどうすればよいですか?

HTML で選択したオプションの背景色をカスタマイズする

HTML では、 を選択します。要素を使用すると、ユーザーはオプションのリストから 1 つのオプションを選択できます。デフォルトでは、ブラウザは選択したオプションを青色の背景で強調表示します。ただし、開発者は多くの場合、この外観をさらにカスタマイズしたいと考えます。

この例では、

背景が赤い要素が定義されていますが、選択されたオプションは青色のままです。 「selected-color」のようなスタイルを使用してこの動作をオーバーライドする試みは、無駄であることが証明されています。この質問では、目的のカスタマイズを実現するために利用できるオプションについて詳しく説明します。

JavaScript ソリューション

この問題に対処するには、純粋な CSS だけでは十分ではない可能性があります。ただし、シンプルな JavaScript ソリューションでこの問題をエレガントに解決できます。

var sel = document.getElementById('select_id');
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);

この粗雑ではあるが効果的な方法により、選択したオプションのみが指定された色を保持し、他のオプションはすべて白に戻ります。

以上がHTML ` 要素で選択したオプションの背景色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。