Y at-il un moyen d'améliorer par CSS un HTML <select> et son <option> sur IE 6?

Question

Internet Explorer 6 semble ignorer totalement les classes CSS ou les règles sur les tags select, option ou optgroup.

Existe-t-il un moyen de contourner cette limitation (sauf installer une version récente de IE)?

Modifier: pour être plus précis, je suis en train de construire une hiérarchie entre des options comme cet exemple:

Voici l'extrait de code HTML:

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

Et voici les règles CSS, qui fonctionne bien sur un navigateur récent (comme FF3), mais ne fonctionne pas du tout sur 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

Ce ne sera pas exactement ce que vous voulez, mais plutôt que d'utiliser CSS, vous pouvez simplement utiliser un certain nombre de

&nbsp ; 

pour les tirets ou des tirets si:

Niveau 1

-Level 2

--level 3

etc.

Si vous ne aime pas particulièrement, vous pouvez les entourer de

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

ou

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

Il ressemblerait

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

Ensuite, vous pourriez avoir la CSS pour les navigateurs modernes.

Answer 2

IE6 mise en œuvre de css pour les options est Bugg y (comme la mise en œuvre de css dans son ensemble pour IE6) Mais vous pouvez style options avec css. Je viens de tester l'option de changement et de sélectionner les balises bgcolor et cela a fonctionné comme prévu. Le seul composant que je connaisse qui ne puisse pas être stylé est l'entrée de fichier.

Answer 3

Oui, vous pouvez les styler (dans une certaine mesure). Je change parfois la police, la couleur de fond et les styles de couleur.

Qu'essayiez-vous d'accomplir?

Des extraits CSS et HTML seraient utiles.

Answer 4

Les articles here et here fournissent un guide très détaillé de ce qui fonctionne ou non avec le style d'élément de formulaire. De mon expérience commerciale, les mises en page de formulaires inter-navigateurs qui fonctionnent sur IE6 ne sont pas impossibles (bien que vous ayez besoin de tester soigneusement). Un résumé est que vous pouvez contrôler les tailles et les couleurs, mais essayer de micro-gérer des choses comme l'alignement du texte est une bataille perdue.

Answer 5

Vous pouvez émuler l'ensemble à l'aide d'un script de menu déroulant. Cela vous donnerait un contrôle complet.

Answer 6

De MSDN reference:

Sauf pour le fond couleurs et la couleur, paramètres de style appliqués à travers l'objet de style pour l'élément d'option sont ignorés. En outre, les paramètres de style appliqués directement aux options individuelles remplacent ceux appliqués à l'élément SELECT dans son ensemble.

Ok, donc ... Il n'y a pas moyen d'obtenir que le travail sur IE ...

Merci Matt pour le nbsp; idée. Je vais sûrement utiliser ce travail.

Answer 7

Jetez un oeil à l'étiquette optgroup pour regrouper les entrées à l'intérieur d'une étiquette de sélection. Regardez ici: http://www.netmechanic.com/news/vol4/html_no20.htm pour un exemple