title: How to set font-family in HTML select dropdown list in IE?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/4672960/change-css-font-family-for-separate-options-in-select-tag">Change css font-family for separate options in select tag</a><br>
    <a href="https://stackoverflow.com/questions/6655625/styling-options-in-bold-in-internet-explorer">Styling options in bold in Internet Explorer</a>  </p>
  </blockquote>
  
  
  
  <p>I am not able to set font-family of a dropdown list of HTML select in IE8,9. <strong>Is it a bug/property or am I doing something wrong?</strong> Font-size setting works. The example is too extreme my real problem is that I have different font on the page and in the list. <br> I don't care about IE7-.   </p>
  
  <p><strong>Example( <a href="http://jsfiddle.net/SDcLX/11/" rel="nofollow noreferrer">http://jsfiddle.net/SDcLX/11/</a>):</strong></p>
  
  <p>I have following HTML:</p>
  
  <pre><code>aaaaa
  &lt;div class="container"&gt;
  skjhlks &lt;select&gt;
      &lt;option class="courier"&gt;courier&lt;/option&gt;
      &lt;option&gt;aa&lt;/option&gt;
      &lt;option style="font-family:impact;" selected="selected"  &gt;bb&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.container
    {
      font-size:30px;
      font-family:Lucida Handwriting;
     }
  select
  {
      font-family:inherit;
      font-size:inherit;
  }
  
  option.courier
   {
      font-family:courier;
   }
  </code></pre>
  
  <p>The result in FF is:</p>
  
  <p><img src="https://i.stack.imgur.com/5Hxnw.png" alt="enter image description here"></p>
  
  <p>and in IE:</p>
  
  <p><img src="https://i.stack.imgur.com/i5mkx.png" alt="enter image description here"></p>