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

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 2

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