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

セレクト ボックス オプションの背景色を変更する方法

セレクト ボックスをクリックすると、オプションのリストが表示されます。デフォルトでは、これらのオプションの背景色は、選択ボックス自体の背景色と同じです。ただし、CSS を使用してオプションの背景色を変更することはできます。

これを行うには、background-color プロパティを select 要素ではなく、option 要素に適用する必要があります。たとえば、次の CSS コードは、選択ボックス内のすべてのオプションの背景色を黒に変更します。

select option {
  background-color: black;
}

各オプションを個別にスタイル設定したい場合は、CSS 属性セレクターを使用できます。たとえば、次の CSS コードは、選択ボックスの最初のオプションの背景色を赤に、2 番目のオプションは緑に、3 番目のオプションは青に変更します。

select option:first-child {
  background-color: red;
}

select option:nth-child(2) {
  background-color: green;
}

select option:nth-child(3) {
  background-color: blue;
}

別のオプションを使用することもできます。各 のクラス属性必要に応じて要素を追加します。たとえば、次の CSS コードは、オプション 1 クラスの選択ボックス内のすべてのオプションの背景色を赤に変更し、オプション 2 クラスのすべてのオプションの背景色を緑に変更します。

.option-1 {
  background-color: red;
}

.option-2 {
  background-color: green;
}

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