8

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

7 Answers 7

8

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.

5

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.

2
  • 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?
    – Goysar
    Jan 12, 2011 at 9:41
  • An &nbsp; does not get displayed - it's called a "Non-breaking space", i.e. it's just a "space". Sep 9, 2013 at 12:25
4

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

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

2

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.

1

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.

1
  • Yes, you're right, I've just added some of my css rules that doesn't work in IE 6. Thanks for your demand ! :)
    – paulgreg
    Oct 8, 2008 at 12:13
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.