Есть ли способ улучшить с помощью CSS HTML <select>и <option>в IE 6?

Question

Internet Explorer 6, похоже, полностью игнорирует CSS-классы или правила для тегов select, option или optgroup.

Есть ли способ обойти это ограничение (кроме как установить последнюю версию IE)?

Редактировать : если быть более точным, я пытаюсь построить иерархию между вариантами, как в этом примере:

Вот фрагмент кода 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>

А вот правила CSS, которые отлично работают в недавнем браузере (например, FF3), но не работают вообще в 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

Очень подробное руководство о том, что работает и не работает со стилем элемента формы, находится в статьях здесь и здесь . Исходя из моего коммерческого опыта, кросс-браузерные макеты форм, которые работают на IE6, не являются невозможными (хотя вам необходимо тщательно протестировать). Суть в том, что вы можете контролировать размеры и цвета, но попытка микроуправления такими вещами, как выравнивание текста, является проигранной битвой.

Answer 2

Это не будет делать именно то, что вы хотите, но вместо использования CSS, вы можете просто использовать число

&nbsp ; 

для отступов или тире так:

Уровень 1

-Уровень 2

- Уровень 3

и т.д.

Если вам это не особо нравится, вы можете окружить их

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

или

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

Так бы это выглядело

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

Тогда вы можете использовать CSS для современных браузеров.

Answer 3

Взгляните на тег optgroup, чтобы сгруппировать записи внутри тега select. Смотрите здесь: http://www.netmechanic.com/news/vol4/html_no20.htm для примера

Answer 4

С MSDN, ссылка :

За исключением фона и цвета, настройки стиля, примененные через объект стиля для элемента option игнорируются Кроме того, стиль настройки применяются непосредственно к индивидуальные параметры отменяют эти применяется к содержащему SELECT элемент в целом.

Хорошо, так ... Нет никакого способа заставить это работать в IE ...

Спасибо Мэтту за НБСП; идея. Я обязательно воспользуюсь этим обходным путем.

Answer 5

Реализация css в IE6 для опций глючит (как и реализация css в целом для IE6). Но вы можете использовать опции стиля CAN с помощью css. Я только что протестировал изменение опции и выбрал теги bgcolor, и все заработало как положено. Единственный известный мне компонент, который не может быть стилизован, - это файл ввода.

Answer 6

Да, вы можете их стилизовать (до некоторой степени). Я иногда меняю шрифт, цвет фона и цветовые стили.

Чего вы пытались достичь?

Были бы полезны фрагменты CSS и HTML.

Answer 7

Вы можете эмулировать все это, используя вместо этого скрипт выпадающего меню. Это дало бы вам полный контроль.