Explore Topics
Waiting Answer February 15, 2024

Change the Select Box Option Background Color

I created a Dropdown with 3 options. I want to set separate colors for separate options. How to do this?

    <select name="cars" id="cars">
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
    </select>

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

Alex TW 2024-02-15 12:10:44

 

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

 

Sahadha 2024-03-04 04:13:13 
<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>
joshijosejose2197@gmail.com 2024-03-18 07:15:19 
HTML code with css:

.op1{

       background-color: red;

     }

.op2{

       background-color: red;

     }

.op3{

       background-color: red;

     }

Ameen 2024-03-20 12:07:02

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

 

Your Answer

Related Questions