title: Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?
body: <p>Internet explorer 6 seems totally ignore CSS classes or rules on select, option or optgroup tags.</p>
  
  <p>Is there a way to bypass that limitation (except install a recent version of IE) ?</p>
  
  <p><strong>Edit</strong> : to be more precise, I'm trying to build a hierarchy between options like that example:</p>
  
  <p>Here's the HTML snippet :</p>
  
  <pre><code>&lt;select name="hierarchicalList" multiple="multiple"&gt;
    &lt;option class="group niv0"&gt;Os developers&lt;/option&gt;
    &lt;option class="group niv1"&gt;Linux&lt;/option&gt;
    &lt;option class="user niv2"&gt;Linus Torvald&lt;/option&gt;
    &lt;option class="user niv2"&gt;Alan Cox&lt;/option&gt;
    &lt;option class="group niv1"&gt;Windows&lt;/option&gt;
    &lt;option class="user niv2"&gt;Paul Allen&lt;/option&gt;
    &lt;option class="user niv2"&gt;Bill Gates&lt;/option&gt;
    &lt;option class="group niv1"&gt;Mac Os&lt;/option&gt;
    &lt;option class="user niv2"&gt;Steve Wozniaz&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And here's CSS rules, that works fine on a recent browser (like FF3) but not working at all on IE6 :</p>
  
  <pre><code> select option {
     line-height: 10px;
   }
  
   select option.group {
      font-weight: bold; 
      background: url(path_to_group_icon.gif) no-repeat; 
      padding-left: 18px;
   }
  
   select option.user {
      background: url(path_to_user_icon.gif) no-repeat; 
      padding-left: 18px;
   }
  
   select option.niv0 { margin-left: 0px; }
   select option.niv1 { margin-left: 10px; }
   select option.niv2 { margin-left: 20px; }
  </code></pre>