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

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.

Answer 2

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 3

Yes you can style them (to some extent). I sometimes change the font, background-color and color styles.

What were you trying to achieve?

CSS and HTML snippets would be useful.

Answer 4

You could emulate the whole thing using a drop-down menu script instead. It would give you complete control.

Answer 5

Take a look at the optgroup tag to group entries inside a select tag. Look here: http://www.netmechanic.com/news/vol4/html_no20.htm for an example

Answer 6

IE6 css implementation for options is buggy (as is the css implementation as a whole for IE6) But you CAN style options with css. I just tested changing option and select tags bgcolor and it worked as expected. The only component I know of that can not be styled is the file input.