HTML: Select Option styling not working

Question

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 1

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

Answer 2

Select option styling doesn't work in Chrome (MAC OS X) , but it will work in Firefox on all systems as well as Chrome (Windows 7).

You can check the detailed description here: Dealing with the select nightmare

Answer 3

Please, try this code:

select option {
    background: rgba(0,0,0,0.3);
    color:red;
}