How to Change the Background Color of Select Box Options in CSS?

How to Change Select Box Option Background Color

When customizing the appearance of a element, it's important to note that styling the option elements is crucial for modifying the appearance of the available options.

Styling the option Elements

To alter the background color of the options, apply the background-color property to the option elements instead of the select element:

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

Customizing Individual Options

To style specific options uniquely, use the attribute selector in CSS. For instance, the following code assigns varying background colors to each option based on its value attribute:

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

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