Changing text color in SELECT boxes

css, html, jquery

Solution

You need to change the color of the text in the `<option>` elements.

$("#selectBox").find("option").css("color", "red");

Problem

so I've spent the last hour searching, finding many answers here on Stack Overflow and on other sites. But none of them work. I want to be able to dynamically set the color of the text in a SELECT drop-down box based on an item that's chosen, using jQuery. I can change the background color easily: ``` $('#selectBox').css("background-color", "red"); ``` But if I do this: ``` $('#selectBox').css("color", "red"); ``` It doesn't work. The text stays black. Other searching has revealed ::selection but that appears to apply to the style of user-selected text (such as for copy/paste). Furthermore, I've tried using CSS classes like this: ``` option.red { color: red } ``` And using addClass() to change the class, but again, it no worky. I've tested this in Firefox, Chrome, and Safari. What am I doing wrong? Thanks!

Original source