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

Solution 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.

Solution 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.

Solution 3

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.

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Mike]

Yes, you're right, I've just added some of my css rules that doesn't work in IE 6. Thanks for your demand ! :)

[Goysar]

its a nice idea but this '-'(dashes) will be displayed in the selected item also. I don't want them to be displayed in the selected field box. How can i do that?

[Matthew Wilcoxson]

An   does not get displayed - it's called a "Non-breaking space", i.e. it's just a "space".