Я написал скрипт jQuery для замены <select />
элементов на некоторые DIV и UL, которые позволяют мне моделировать исходный SELECT, но также позволяют мне стилизовать его. Пока, кроме нескольких мелких ошибок, он работает довольно хорошо.
Тем не менее, в Internet Explorer div 'options' отображается под элементами ниже div.
Вот HTML:
<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
<div class="styledSelect-newSelect" style="position: relative;">
<input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
<div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li class="styledSelect-active">Test4</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
</div>
</div>
<br /><br />
<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
<div class="styledSelect-newSelect" style="position: relative;">
<input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
<div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
<ul>
<li class="styledSelect-active">Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
Если я открою первый выбор, список LI будет находиться под вторым полем выбора, а не над ним. Я не могу заставить z-индексы работать должным образом.
Чего мне не хватает? : /
РЕДАКТИРОВАТЬ: Я должен отметить, что HTML генерируется динамически из jQuery. Полный код можно найти здесь .