Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?

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

A very detailed guide to what does and does not work with form element styling is in the articles here and here. From my commercial experience cross-browser form layouts that work on IE6 are not imposssible (although you do need to test carefully). An executive summary is that you can control sizes and colours but trying to micro-manage things like text alignment is a losing battle.

Answer 2

This won't do exactly what you want, but rather than using CSS, you could just use a number of

&nbsp ; 

for the indents, or dashes so:

Level 1

-Level 2

--Level 3

etc.

If you don't particularly like that, you could surround them with

<!--[if lt IE 7]><![endif]--> 

or

<!--[if IE 6]><![endif]--> 

So it would look like

Level 1
<!--[if lt IE 7]>-<![endif]-->Level 2 
<!--[if lt IE 7]>--<![endif]--> Level 3

Then you could have the CSS for modern browsers.