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

<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> в Windows XP/Firefox 1.0.2.

или так:

Элемент <select> в Windows XP/Firefox 1.0.2.

в зависимости от операционной системы и браузера.

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

Элемент select произвольного оформления

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

План

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

Скрипт

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

Пример формы с произвольными элементами select

При этом сохраняется вся функциональность элемента select, в том числе возможность работать с клавиатуры и назначения ему tabindex, а возможности его оформления ограничиваются только вашей фантазией. Я подготовил пример, демонстрирующий возможности этого скрипта. Чтобы изучить скрипт вы можете скачать, подробно комментированный, исходник примера (zip), на странице код будет сильно сжат и не подсвечен, что значительно затрудняет просмотр.

Для оформления использовано два изображения, и техника Sliding Doors, единственный нюанс в том, что в нижнем изображения есть прозрачная область в которую помещается стрелка с верхнего изображения.

Скрипт протестирован в браузерах IE6, IE7, FF2, Opera 9, если вы обнаружите баги, сообщите, пожалуйста.

Базой для написания этого скрипта послужили, статьи Аарона Густафсона, <select> Something New, Part 1 и <select> Something New, Part 2.