Change the Select Box Option Background Color

LAZIO LEO 2024-02-15 05:00:55

To set separate colors for each option in a dropdown menu, you can use CSS to style the option elements individually. However, please note that the styling of option elements is limited and may not be supported consistently across all browsers.

.option-one {
   color: blue;
 }
.option-two {
  color: green;
}
.option-three {
  color: red;
}
 

Ameen 2024-03-20 12:07:02

Method 1:

We can add a class for the elements and assign desired colors to the desired elements

Method 2:

Use a custom drop-down to get a full styling control. For that, use the following Libraries like

• Bootstrap Select
  Select2
  Choices.js