Change the Select Box Option Background Color

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 styling of option elements is limited and may not be supported consistently across all browsers.

.<select name="cars" id="cars">
  <option value="One" class="option-one">One</option>
  <option value="Two" class="option-two">Two</option>
  <option value="Three" class="option-three">Three</option>
</select>.

.option-one {
  color: blue;
}

.option-two {
  color: green;
}

.option-three {
  color: red;
}
 

<select name="cars" id="cars">
  <option value="One" style="background-color: red">One</option>
  <option value="Two " style="background-color: green">Two</option>
  <option value="Three " style=" background-color: yellow">Three</option>
</select>

<select name="cars" id="cars">
      <option value="One" style="background-color:yelloe; color:black;>One</option>
      <option value="Two" style="background-color:green; color:white;>Two</option>
      <option value="Three" style="background-color:blue; color:black;>Three</option>
    </select>

HTML code with css:

      One
      Two
      Three

.op1{

       background-color: red;

     }

.op2{

       background-color: red;

     }

.op3{

       background-color: red;

     }

we can add class for the elements and assign desired colors for the desired elements