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

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

の外観をカスタマイズする場合要素の場合、使用可能なオプションの外観を変更するには、オプション要素のスタイル設定が重要であることに注意することが重要です。

オプション要素のスタイル設定

背景色を変更するにはオプションでは、選択の代わりに背景色プロパティをオプション要素に適用します。 element:

select option {
  margin: 40px;
  background-color: #000;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

個々のオプションのカスタマイズ

特定のオプションを独自にスタイル設定するには、CSS の属性セレクターを使用します。たとえば、次のコードは、value 属性に基づいて各オプションにさまざまな背景色を割り当てます:

select option[value="1"] {
  background-color: #646464;
}

select option[value="2"] {
  background-color: #969696;
}

select option[value="3"] {
  background-color: #C8C8C8;
}

select option[value="4"] {
  background-color: #FAFAFA;
}

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