選択ボックスのオプションの背景色を変更するにはどうすればよいですか?

選択ボックスを開いたときにオプションの背景色を変更する方法

選択ボックスをカスタマイズしようとすると、背景を変更するのが困難になりますアクティブ化されたときのオプションの色。これを解決するには、正しい HTML 要素をターゲットにすることが重要です。

解決策:

選択ボックス自体とは異なり、背景色の変更はオプション要素に適用する必要があります。 :

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

上級カスタマイズ:

個別のスタイル設定には、属性セレクターを使用します:

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

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

さらに、クラス属性を利用してより詳細な制御を行うことができます:

<select>
  <option class="custom-option" value="1">Option 1</option>
  <option class="custom-option" value="2">Option 2</option>
</select>

.custom-option {
  background: blue;
}

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