Стилизированный раскрывающийся список (select в html)

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

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

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

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

styled-drop-down

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

5 Responses to “Стилизированный раскрывающийся список (select в html)”

  1. orisline.ru says:

    хорошее решение

  2. Ди says:

    А если много элементов списка? как сделать прокрутку?

  3. freedom says:

    Да хороший и удобный скрипт, который подменяет select со всеми option в удобный для стилизации список из ul li. И не надо подключать jQuery.

Leave a Reply




*