Все знают, как уродливо иногда смотрится элемент select, изменить некоторые особенности его оформления невозможно, поэтому часто он становиться худшим местом превосходного дизайна. Не нужно с этим мириться, тем более что решение проблемы уже давно найдено.
 
Select

---

В коде элемент select выглядит, примерно, так:
а на странице он может выглядеть так:

или так:

в зависимости от операционной системы и браузера.
 
Давайте представим, что мы хотим, чтобы он выглядел одинаково во всех браузерах и идеально подходил к дизайну сайта, например, нам нужен такой select:

Как можно это сделать? Возможность оформления элемента select ограничена выбором цвета фона и текста, свойств границ и шрифта, остальные параметры отображения остаются неизменными.
 
План

---

Сразу приходит мысль о полной замене select другим элементом, и эмуляции его функциональности с помощью JavaScript, больше всего на замену select подходит элемент ul, который похож на него по структуре и семантике.
 
Скрипт

---

Ниже приведен скрипт, заменяющий все элементы select на списки, подражающие им поведением, в результате его работы, мы получаем такую форму:

 
При этом сохраняется вся функциональность элемента select, в том числе возможность работать с клавиатуры и назначения ему tabindex, а возможности его оформления ограничиваются только вашей фантазией. Я подготовил пример, демонстрирующий возможности этого скрипта. Чтобы изучить скрипт вы можете скачать, подробно комментированный, исходник примера (zip), на странице код будет сильно сжат и не подсвечен, что значительно затрудняет просмотр.
 
Для оформления использовано два изображения, и техника Sliding Doors, единственный нюанс в том, что в нижнем изображения есть прозрачная область в которую помещается стрелка с верхнего изображения.
 
Скрипт протестирован в браузерах IE6, IE7, FF2, Opera 9, если вы обнаружите баги, сообщите, пожалуйста.
 
Design For Masters