title: CSS - change font-family for individual select options
body: <p>Here is what I am trying to acheive:</p>
  
  <ul>
  <li>Standard SELECT form element</li>
  <li>The FIRST option will have font-family of Verdana</li>
  <li>All other options will have font-family of Arial</li>
  <li>After selecting an option, the SELECT will appear in the font-family of that option</li>
  <li>This is done using a combination of CSS and JS. JS is used to change the class of the SELECT so that it can apply the correct style.</li>
  </ul>
  
  <p>I have got this working to the above requirements in Firefox and IE11 but not in Chrome 36 (Windows).</p>
  
  <p>Here is a JSFiddle: <a href="http://jsfiddle.net/KhvJc/" rel="nofollow">http://jsfiddle.net/KhvJc/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>select {
      width: 150px;
      font-size: 12px;
      padding: 5px;
      height: 30px;
  }
  
  /* when the first option is selected */
  select.empty {
      color: #959595;
      font-family: Verdana;
  }
  
  /* all options except the first when the first option is selected and the select has focus */
  select.empty:focus option:not(:first-child) {
      color: #282525;
      font-family: Arial;
  }
  
  /* first option when the select has focus */
  select:focus option:first-child {
      color: #BDBDBD;
      font-family: Verdana;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('select').change(function(){
      if($(this).val() == '')
      {
          $(this).addClass('empty');
      }
      else
      {
          $(this).removeClass('empty');
      }
  }).change();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select&gt;
      &lt;option value=""&gt;Empty Option&lt;/option&gt;
      &lt;option value="1"&gt;Option 1&lt;/option&gt;
      &lt;option value="1"&gt;Option 2&lt;/option&gt;
      &lt;option value="1"&gt;Option 3&lt;/option&gt;
      &lt;option value="1"&gt;Option 4&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>As you will see, in Chrome it does not apply the <code>font-family</code> to individual options but it does manage to apply the <code>color</code>. Anybody know how to fix this?</p>