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