Explore Topics

Change the Select Box Option Background Color

Last Updated : 18 Apr, 2025 - Asked By Ashok

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>

html  select tag 

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

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>

 

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>
2024-03-18 07:15:19
HTML code with css:

.op1{

       background-color: red;

     }

.op2{

       background-color: red;

     }

.op3{

       background-color: red;

     }

2024-03-20 12:07:02

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

 

Your Answer



Other Resources

Quiz Image
Quiz

Test your knowledge with interactive quizzes.

Interview Questions Image
Interview Questions

Prepare for interviews with curated question sets.

Q&A Image
Q&A

Ask your coding-related doubts and get answers.

Certification Image
Certification

Earn certifications to enhance your resume.

internships Image
Internships

Hands-on projects to improve your skills.

Quiz Image
Quiz

Test your knowledge with interactive quizzes.

Interview Questions Image
Interview Questions

Prepare for interviews with curated question sets.

blog Image
Blogs

Add your technical blogs and read technical topics.

Certification Image
Certification

Earn certifications to enhance your resume.

Q&A Image
Q&A

Hands-on projects to improve your skills.