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

選択ボックス オプションの背景色の変更

質問:

背景を変更する必要がありますボックスをクリックしてすべてのオプションを表示するときの選択ボックスのオプションの色。どうすればこれを実現できますか?

答え:

変更する必要があるコードは次のとおりです:

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

background-color プロパティを適用することによってselect要素の代わりにoption要素に追加すると、ボックスがオンになっているときにオプションの背景色を変更できます。

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

各オプション要素を異なるスタイルにするには、CSS 属性セレクターを使用するか、各 に異なるクラス属性を割り当てることができます。 .

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

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

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

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

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