СSS opacity і selectи

2 Серпень, 2010

Зовсім недавно вичитав на хабрі цікавий CSS баг / фічу. Припустимо стоїть завдання оформити select. Результат повинен виглядати як «посилання» див картинку, при кліці на якому випадає список доступних міст, ніби нічого тут такого, але як вияснилось є такий хитрозамучений спосіб зробити це за допомогою css opacity, при тому все досить таки кросбраузерно.

css opasity i select

Якщо для select-а встановити прозорість, то він стане прозорим, но сам список залишається непрозорим, цікава і досить корисне поведінка.


Вся сіль в простоті рішення, єдине іе6 нефуричить, но то таке.

.selectWrap select{
position:absolute;
margin:-2px 0px 0px -5px;
font-family: Trebuchet MS, sans-serif;
font-size:18px;
opacity:0;
}
<div class="selectWrap">
<select>
<option>Тернопіль</option>
<option>...</option>
</select>
</div>

От така от цікава штуковина.

Популярні

Коментувати

Можна юзати ці теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>