CSS で選択ボックス オプションの背景色をカスタマイズするにはどうすればよいですか?

選択ボックスのオプションの背景色のカスタマイズ

選択ボックスをクリックしてオプションを表示するとき、選択ボックスの背景色をカスタマイズできます。それらのオプション。これを実現するには:

オプション要素を選択します:

まず、選択要素自体ではなく、選択ボックス内のオプション要素をターゲットにします。これは、CSS でオプションを選択するためにスタイルを適用することで実行できます:

select option {
  ...
}

背景色の設定:

次に、オプションの背景色プロパティを設定します。要素を希望の色に変更します。たとえば、暗い背景が必要な場合:

select option {
  background-color: rgba(0, 0, 0, 0.3);
}

個別オプションのスタイル (オプション):

個別のオプションのスタイルを変更したい場合は、次のようにします。 CSS 属性セレクターを使用して、値属性に基づいてそれらをターゲットにします。たとえば、各オプションに異なる背景色を与えるには:

select option[value="1"] {
  background-color: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background-color: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background-color: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background-color: rgba(250, 250, 250, 0.3);
}

以上がCSS で選択ボックス オプションの背景色をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。