Такие элементы, как 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>
Используйте скрипт на здоровье!
PHP
Joomla
Joomla 1.5 модули и плагины
WordPress
Онлайн сервисы
Услуги
Работа в сети
Новое на сайте
Карта сайта
Добавить комментарий