Select списки из ul li элементов с картинками
X
Форма обратной связи
Обратная связь

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

549

Такие элементы, как 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>  

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

| | Select списки из ul li элементов с картинками | Такие элементы, как select или полоса прокрутки в браузере нельзя изменить с помощью css, по крайней мере максимально кроссбраузерно. Но сейчас мы пог | http://blogprogram.ru/wp-content/uploads/2017/01/549-131x131.jpg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>