title: Change color of selected option in html select input
body: <p>I am trying to change the text color of a SELECTED option in a Select menu and I cannot seem to get it to work. Below is my code. Any ideas? I only want to change the color once an option with a value has been selected... i.e. anything but the first option. </p>
  
  <p><a href="http://jsfiddle.net/wtedm8q9/" rel="nofollow">http://jsfiddle.net/wtedm8q9/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="row1-3home"&gt;
    &lt;select  name="phone1" id="phone1"&gt;
          &lt;option value=""&gt;-- Select Phone Type --&lt;/option&gt;
          &lt;option value="Mobile"&gt;Mobile&lt;/option&gt;
          &lt;option value="Office"&gt;Office&lt;/option&gt;
          &lt;option value="Home"&gt;Home&lt;/option&gt;
      &lt;/select&gt;
  
     &lt;select  name="phone2" id="phone2"&gt;
          &lt;option value=""&gt;-- Select Phone Type --&lt;/option&gt;
          &lt;option value="Mobile"&gt;Mobile&lt;/option&gt;
          &lt;option value="Office"&gt;Office&lt;/option&gt;
          &lt;option value="Home"&gt;Home&lt;/option&gt;
    &lt;/select&gt;  
  
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.row1-3 select, .row1-3home select {
  background:#FFF;
  font-size:12px;
  font-family:'Open Sans', sans-serif;
  width:94%;
  margin-left:3%;
  margin-right:3%;
  height:40px;
  line-height:40px;
  border:none;
  padding-left:10px;
  border-radius:none;
  margin-bottom:5px;
  -moz-appearance: none;
  }
  .row1-3 select option, .row1-3home select option {
  color:#01afd2;
  }
  .row1-3 select option:not(:checked), .row1-3home select option:not(:checked) {
  color:#9fa7b4;
  }
  </code></pre>