title: How to change the font color in a selected option?
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;div class="register_account"&gt;
      &lt;form&gt;
          &lt;select&gt;
              &lt;option value="null"&gt;Select a Country&lt;/option&gt;
              &lt;option value="AX"&gt;Åland Islands&lt;/option&gt;
              &lt;option value="AF"&gt;Afghanistan&lt;/option&gt;
              &lt;option value="AL"&gt;Albania&lt;/option&gt;
              &lt;option value="DZ"&gt;Algeria&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS code:</p>
  
  <pre><code>.register_account
  { 
      background: #0023C4;
      width:62%;
      padding:1.5%;
  }
  
  .register_account form select
  { 
      width:100%;
      font-size:0.8em;
      color:#000;
      padding:8px;
      margin:5px 0;
      background: none;
      border: 1px solid #fff !important;
  }
  </code></pre>
  
  <p>Now I want to change the text color of "Select a Country" and of the "selected" option in the form.</p>
  
  <p>P.S. The example is here: <a href="http://jsfiddle.net/V7C6w/" rel="nofollow">http://jsfiddle.net/V7C6w/</a> .</p>
  
  <p>Edit:</p>
  
  <p>A possible solution to remedy the problem might be:</p>
  
  <pre><code>.register_account
  { 
      background: #0023C4;
      width:62%;
      padding:1.5%;
  }
  
  .register_account form select
  { 
      width:100%;
      font-size:0.8em;
      color:#fff;
      padding:8px;
      margin:5px 0;
      background: #0023C4;
      border: 1px solid #fff !important;
  }
  </code></pre>
  
  <p>Prove yourself: <a href="http://jsfiddle.net/V7C6w/9/" rel="nofollow">http://jsfiddle.net/V7C6w/9/</a></p>