Select списки из ul li элементов с картинками

Такие элементы, как select или полоса прокрутки в браузере нельзя изменить с помощью css, по крайней мере максимально кроссбраузерно. Но сейчас мы поговорим о стилизации select списков.

Как в них добавить картинки, поменять цвета "option"-ов и т.п. Для реализации данной задачи я видел на одном сайте сырой код, который позволял преобразовывать ul li элементы в подобие select-а. Его мы и будем использовать. Демонстрацию и сам пример вы можете увидеть ниже.

Я хотел использовать тот скрипт, но он сильно нуждался в доработке. Например, нельзя было создавать более одного селекта на одной странице - в этом случае при раскрытии второго селекта, раскрывался первый и второй. Была немного неправильно установлена картинка, я переместил ее в более нужное место. А также использовались id-ки вместо классов. Это недопустимо, если пользователю нужно иметь много селектов на одной странице.

В общем переделав скрипты, структуру и html представляю вам улучшенный скрипт стильного select-а.

Особенности скрипта:

Для установки просто повторите структуру с классом .selectboxss. Именно за счет него и переделывается ul li в список.

Активный (выбранный) пункт списка всегда находится в .selectboxssvalue span.

Чтобы задать списку новый option просто продублируйте элемент с классом .selectoption. Кстати ничего вам не помешает назначить дополнительный класс, чтобы, например выделить определенный пункт цветом. А внутрь самого .selectoption можно добавить любую структуру, например, картинку. При этом в результат .selectboxssvalue span передастся только текст.

Для запуска скрипта используйте строку, как в примере:

<script> $(document).ready(function(){ $('.selectboxss').selectbox(); }); </script>  

Используйте скрипт на здоровье!