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 サイトの他の関連記事を参照してください。

css for select Attribute Property background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS スター セレクターは密かに Web サイトの速度を低下させますか?次の記事：CSS スター セレクターは密かに Web サイトの速度を低下させますか?

関連記事

続きを見る

• CSSを書くときにBorderについて注意すべきことまとめ
• 複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流
• マーキーの詳細な使用状況分析
• CSSタイトル行の実装（行削除効果による行削除）
• CSS3 におけるグレースフル デグラデーションとプログレッシブ エンハンスメントの違い

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved