title: Select font color before and after selection
body: <p>I have a form select where the first option is a disabled default title which acts like a placeholder.</p>
  
  <pre><code>&lt;select&gt;
    &lt;option disabled selected&gt;Client&lt;/option&gt;
    &lt;option value="John"&gt;John&lt;/option&gt;
    &lt;option value="Pete"&gt;Pete&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want to be able to style the font <code>color:#999</code> before user clicks on the select, then after they've made a selection, the font should change to <code>color:#333</code>. Is this possible?</p>
  
  <p>Consider the following jsFiddle: <a href="http://jsfiddle.net/ayxeb759/" rel="nofollow">http://jsfiddle.net/ayxeb759/</a></p>
  
  <p>The fiddle shows that this is possible for other form elements but possibly not select. Text inputs use <code>::placeholder</code> styling then styling for the block like so:</p>
  
  <pre><code>/* text input before */
  *:-moz-placeholder { color: #AAA; }
  *::-moz-placeholder { color: #AAA; }
  *:-ms-input-placeholder { color: #AAA; }
  *::-webkit-input-placeholder { color: #AAA; }
  
  /* text input after */
  input[type="text"] { color: #333; }
  </code></pre>
  
  <p>Checkboxes use <code>:checked</code> to alter styling after the user has made a selection.</p>
  
  <p>So how can I achieve the same for select?</p>