CSS と JavaScript を使用して「要素」で選択したオプションの背景色を変更するにはどうすればよいですか?

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

一方、CSS には

の豊富なスタイル オプションが用意されています。要素には、現在選択されているオプションの背景色を変更するための特定のスタイル属性がありません。ただし、純粋な CSS と JavaScript を組み合わせることで、この制限に効果的に対処できます。

提供されているサンプル HTML コードでは、要素は、「background-color:red;」を使用してドロップダウン リストの背景色を設定します。ただし、オプションを選択すると、デフォルトの青色が想定されます。これをオーバーライドして、選択したオプションの背景色をカスタマイズするには、従来の 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);

このスクリプトでは:

を取得します。

ユーザーが をクリックすると、要素が ID で指定されます。

要素を取得すると、すべての子要素 ​​(オプション) をループして色を白に設定します。

次に、選択されたオプションを取得し、その色を赤に設定して、残りのオプションから強調表示します。

この JavaScript ソリューションでは、選択したオプションの背景色をカスタマイズできますが、要素の CSS スタイルは直接変更されないことに注意することが重要です。 JavaScript を通じて要素の動的な外観を操作します。このアプローチは、要件が選択されたオプションの背景色のみをカスタマイズすることであり、 の CSS カスタマイズをさらに必要としない場合に実行可能な解決策となる可能性があります。要素。

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