Помощь с заменой html select

Question

Ненавижу элемент управления по умолчанию, потому что его нельзя использовать в IE с помощью CSS. Вот почему я разработал новый элемент управления с нуля, используя HTML + CSS + JavaScript. Я проделал отличную работу за последние два дня, совместив CSS и HTML вместе, но сегодня я обнаружил ошибку, которая очень тяжело для меня исправлять.

В IE 7, когда у меня есть элементы управления буксировкой на одной странице, верхняя часть сверху не накладывается на нижнюю.

Смотрите изображение: coolrgb точка ком/файлы/выбрать-help.jpg

Скачать демо-страницу (HTML + CSS + Javascript): coolrgb точка ком/файлы/select-help.zip

Пожалуйста, помогите мне, этот контроль выглядит так хорошо для меня, и я хочу использовать его во всех моих проектах. Эта ошибка убила мои надежды и много времени.

спасибо.

Answer 1

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

Я бы предложил изменить свой контроль, чтобы вести себя как настоящий элемент SELECT: только один может быть открыт одновременно, или потеря фокуса заставляет его закрыть. В качестве альтернативы вы можете установить высокий индекс z, когда элемент управления имеет фокус, а нижний - при отсутствии.

Еще одна вещь, на которую нужно обратить внимание: попробуйте поместить некоторые другие элементы управления, такие как радио, флажок и выберите под своим контролем. Вы можете обнаружить, что IE также не будет парить над ними, даже если вы дадите им другой z-индекс (как объяснил @grawity в его ответе). Вот почему вы обычно видите демонстрацию виджета, отображаемую поверх этих элементов, как показано здесь: http://jqueryui.com/demos/dialog/

Типичный взломать это означает использовать iframe, но это, вероятно, вообще заслуживает другого вопроса.

Answer 2

Редактировать: Перечитав вопрос, этот ответ теперь кажется совершенно несвязанным, но я все равно сохраняю его здесь.

Не совсем ответ, но попытка объяснить:

В Internet Explorer, <select> теги реализованы в виде простого windowed controls, в то время как все остальные элементы управления без окон (это позволяет им быть стилизовано). Вот почему эти теги всегда на высоте и не следуют правилам z-порядка. (Выпадающее меню должно быть стильным, так что это управление без окон, и поэтому оно отображается под основной частью.)

В Firefox все элементы без окон, а в IE8 они тоже должны быть.