Select
В коде элемент select выглядит, примерно, так:
<select id="something" name="something" tabindex="101">
<option value="1">Вариант 1</option>
<option value="2">Вариант 2</option>
<option value="3">Вариант 3</option>
<option value="4">Вариант 4</option>
<option value="5" selected="selected">Вариант 5</option>
</select>а на странице он может выглядеть так:
или так:
в зависимости от операционной системы и браузера.
Давайте представим, что мы хотим, чтобы он выглядел одинаково во всех браузерах и идеально подходил к дизайну сайта, например, нам нужен такой select:
Как можно это сделать? Возможность оформления элемента select ограничена выбором цвета фона и текста, свойств границ и шрифта, остальные параметры отображения остаются неизменными.
План
Сразу приходит мысль о полной замене select другим элементом, и эмуляции его функциональности с помощью JavaScript, больше всего на замену select подходит элемент ul, который похож на него по структуре и семантике.
Скрипт
Ниже приведен скрипт, заменяющий все элементы select на списки, подражающие им поведением, в результате его работы, мы получаем такую форму:
При этом сохраняется вся функциональность элемента select, в том числе возможность работать с клавиатуры и назначения ему tabindex, а возможности его оформления ограничиваются только вашей фантазией. Я подготовил пример, демонстрирующий возможности этого скрипта. Чтобы изучить скрипт вы можете скачать, подробно комментированный, исходник примера (zip), на странице код будет сильно сжат и не подсвечен, что значительно затрудняет просмотр.
Для оформления использовано два изображения, и техника Sliding Doors, единственный нюанс в том, что в нижнем изображения есть прозрачная область в которую помещается стрелка с верхнего изображения.
Скрипт протестирован в браузерах IE6, IE7, FF2, Opera 9, если вы обнаружите баги, сообщите, пожалуйста.
Design For Masters