How Can I Change the Background Color of Select Box Options?

Change Select Box Option Background Color

Question:

I need to change the background color of select box options when the box is clicked and displays all the options. How can I achieve this?

Answer:

Here's the code you need to modify:

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

By applying the background-color property to the option elements instead of the select element, you can change the background color of the options when the box is clicked.

Styling Individual Option Elements:

To style each option element differently, you can use the CSS attribute selector or assign different class attributes to each .

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);
}

The above is the detailed content of How Can I Change the Background Color of Select Box Options?. For more information, please follow other related articles on the PHP Chinese website!