Есть стилизованный селект, ниже находиться кнопка. Когда раскрываем список у селект он проваливается под кнопку.
| Код |
.s_date {width:84px; vertical-align:middle }
.clear {height:0; font-size:0; clear:both}
.button {color: #3D413F; height: 17px; padding: 4px 12px 0 12px; background: url(../img/button-autz.png) no-repeat 0 0; font-size: 12px; float: left; position: relative; overflow: hidden; cursor:hand; }
.button span {background: url(../img/button-autz.png) no-repeat 100% 0; height: 21px; width: 4px; display: block; position: absolute; z-index: 1; top: 0; right: 0; overflow: hidden; }
.button input { background:none; position: absolute; top: 0; left: 0; width: 200%; height: 100%; opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: pointer; border: none; z-index: 2; }
<form action="">
<select class="s_date" id="sel_date">
<option>2011</option>
<option>2010</option>
</select>
<div class="clear"></div>
<div class="button">
<input type="submit" value="" />Открыть документ
<span> </span>
</div>
|
Select стилизован с помощью http://www.xiper.net/collect/html-and-css-tricks/verstka-form/nice-select-jquery.html
В чем проблема, если контейнеру селекта изначально в скрипте задается z-index: 0, но у выпадающего списка z-index: 5? |