Is there a way to enhance by CSS an HTML <selec

Question

Internet explorer 6 seems totally ignore CSS classes or rules on select, option or optgroup tags.

Is there a way to bypass that limitation (except install a recent version of IE) ?

Edit : to be more precise, I'm trying to build a hierarchy between options like that example:

Here's the HTML snippet :

<select name="hierarchicalList" multiple="multiple">
  <option class="group niv0">Os developers</option>
  <option class="group niv1">Linux</option>
  <option class="user niv2">Linus Torvald</option>
  <option class="user niv2">Alan Cox</option>
  <option class="group niv1">Windows</option>
  <option class="user niv2">Paul Allen</option>
  <option class="user niv2">Bill Gates</option>
  <option class="group niv1">Mac Os</option>
  <option class="user niv2">Steve Wozniaz</option>
</select>

And here's CSS rules, that works fine on a recent browser (like FF3) but not working at all on IE6 :

 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; }

Answer 1

From MSDN reference :

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.

Ok, so... There's no way to get that working on IE...

Thanks Matt for the nbsp; idea. I will surely use that work-around.