www.devhaven.io www.devhaven.io - 5 months ago 16
CSS Question

HTML: Select Option styling not working

I'm trying to style a select box, changing all of the color options to red. However, when I load the webpage the select box still has color black. Any help please?

Here is the HTML & CSS:



select.selector option {
color: red;
}

<select style="font-size: 16px; padding: 4px;" name="category" id="categoryselector" class="selector">
<option disabled></option>
<option value='all'>all</option>
<option disabled></option>
<option>Hardware and OS</option>
</select>





And here is a JSFiddle

Answer

You're applying the color to the options within the select box. To apply it to the visible select box, use:

select.selector{
color:red;
}