Change around the color of copy at a dropdown list (at least in Google Chrome).

Just setting the color in CSS will make the copy one sees in the field itself beyond the dropdown list that appears when clicked before the control is ever clicked, the color specified, but unfortunately this will also color both the dropdown arrow (which implies "click me, I'll open a list") and also all of the list items. The solutions I have seen in Googling about an exception for the arrow all look a little painful. I think you have to swap out the arrow with your own .png or something. Anyway, you may set the color of the individual list items like so:

option.blackShow {
   color: #000000;
}
option.whiteHide {
   color: #FFFFFF;
}
.redUpFront {
   color: #FF0000;
}

 
 

The option tags get classes like so:

<div>Are you a boy or a girl?</div>
<select class="redUpFront" id="gender">
   <option value="" class="whiteHide" selected>pick...</option>
   <option value="M" class="blackShow">boy</option>
   <option value="F" class="blackShow">girl</option>
</select>