title: Can't override CSS font color for <select> <option> for a single character
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/7717796/css-with-option-tag-editing-text-color">CSS with Option tag - Editing text color</a>  </p>
  </blockquote>
  
  
  
  <p>I know I must be overlooking something very simple. I am trying to change the color of the asterik (*) next to the SELECT AN AMOUNT  just showing customer that it is required. I have tried span and font tags specifying the color but nothing seems to work. I can't seem to override the css for the select. Any help is appreciated.</p>
  
  <p>I have posted code here also: <a href="http://jsfiddle.net/RGFAc/" rel="nofollow noreferrer">http://jsfiddle.net/RGFAc/</a></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .styled-select select {background: transparent;width: 150px;color:#333333;font:bold 11px Arial, sans-serif;border: 1px solid #ABADB3;height: 25px;}
  &lt;/style&gt;
  
  &lt;div class="styled-select"&gt;
  &lt;select name="id" id="id"&gt;
  &lt;option value=""&gt;SELECT AN AMOUNT &lt;span style="color:#EE3124"&gt;*&lt;/span&gt;&lt;/option&gt;
  &lt;option value="gift5"&gt;$5&lt;/option&gt;
  &lt;option value="gift10"&gt;$10&lt;/option&gt;
  &lt;option value="gift15"&gt;$15&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  </code></pre>