Home >Web Front-end >CSS Tutorial >How to Change the Background Color of Select Box Options in CSS?
How to Change the Background Color of Select Box Options in CSS?
- DDDOriginal
- 2024-12-18 11:54:11648browse
How to Change Select Box Option Background Color
When customizing the appearance of a
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!