Mihalytch personal blog

Ниже представлено решение на JavaScript и CSS, с помощью которого можно было бы изменить внешний вид любой части выпадающего списка. При этом соблюдена кроссбраузерность, а также решена проблема, возникающая в IE 6 при перекрытии DIV`ом выпадающего списка select, который оказывался видимым при любом значении z-index.

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

JavaScript перехватывает все события onClick на странице и проверяет не "нажал" ли пользователь на ту или иную область выпадающего списка. Если произошло необходимое событие, и необходимо раскрыть, свернуть или выбрать необходимый элемент, скрипт применяет к элементам маркированного списка соответствующие стили и изменяет выбранное значение исходного выпадающего списка <select> (который был скрыт при загрузке страницы).

Ниже привожу результат стилизации (взят с реального проекта):

Чтобы не загромождать страницу кодом размещаю ссылку на архив с рабочим примером.