How to Change the Background Color of Select Box Options?

How to Alter the Background Color of Select Box Options When Opened

In attempting to customize a select box, you encounter difficulty changing the background color of its options when activated. To resolve this, it's crucial to target the correct HTML element.

Solution:

Unlike the select box itself, the background color modification should be applied to the option elements:

select option {
  background: rgba(0, 0, 0, 0.3);
}

Advanced Customization:

For individual styling, employ attribute selectors:

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

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

Additionally, you can leverage class attributes for finer control:

<select>
  <option class="custom-option" value="1">Option 1</option>
  <option class="custom-option" value="2">Option 2</option>
</select>

.custom-option {
  background: blue;
}

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