Стиль для select CSS или как стилизовать выпадающий список

26.10.2016

Для того, чтобы ваша страничка в интернете стала заметной, выделялась на общем фоне, ее надо немного украсить. Современные программные средства предлагают для этого множество способов.
CSS3 предоставляет практически безграничные возможности для оригинального оформления современных сайтов. CSS3 позволяет быстро и довольно просто сделать ваш сайт необычным и запоминающимся.
В этом занятии я продемонстрирую, как с помощью CSS можно изменить внешний вид select (выпадающий список). Его можно сделать нестандартным и эффектным.

Для начала, рассмотрим один из способов стилизации выпадающих списков на видео.

 

2. Способ стилизации select CSS

Сейчас я продемонстрирую, что мы можем получить в результате несложных операций:
Стиль для select CSS или как стилизовать select

Здесь вы можете скачать исходник Select, созданный с помощью CSS:

Скачать: Select CSS
Стиль для select CSS или как стилизовать выпадающий список
Скачано: 1293, размер: 7.9 KB, дата: 16.Май.2017

Рассмотрим подробнее весь ход создания выпадающего списка.

1 шаг. Подключаем необходимые файлы

В первую очередь необходимо скачать архив с исходными материалами и взять оттуда два файла style.css и select.js или select_demo2.js. Это зависит от того, какой вид списка вы хотите создать. Скаченные файлы включаем между тегами <head></head>:

2 шаг. HTML структура элемента Select

Все очень просто и доступно на языке разметки HTML. Выпадающий список с рядом пунктов.

3 шаг. Добавляем стили для Select CSS

Стилей для select CSS не так уж и много. В данном материале приведены стили для первого списка. Запомните, пожалуйста. Есть два пути к изображениям: один раскрывает (стрелка «вверх»), а второй закрывает список (стрелка «вниз»). Эти пути тоже находятся в исходных материалах:

В демонстрационной версии все стили расположены в папке css.Чтобы отобразить путь к папке сначала указываются «..», чтобы выйти на один уровень вверх, а потом вход в папку images.

Если мы хотим создать список с постоянной высотой, нет нужды копировать все стили, достаточно вместо стиля dropdownvisible вставить:

 

Также нужно изменить скрипты, согласно, приведенных выше, указаний. В результате получим:

2016-10-26_125826

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

  • ✓Firefox 24.0, Firefox 25.0, Firefox 26.0
  • ✓Chrome 29.0, Chrome 30.0, Chrome 31.0
  • ✓Opera 12.14, Opera 12.15, Opera 12.16
  • ✓IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
  • ✓Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
  • ✓Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
  • ✓Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

 

Как видите, с помощью CSS и Javascript очень просто стилизовать выпадающий список Select по своему желанию. Успех вам гарантирован.

Серж

Попробуйте jQuery Form Styler — достаточно универсальный вариант.

Ответить
Vlad

Подскажите плз, где прописывается синий фон под выпадающими option1 option2 ?

Ответить
Digrand

Здравствуйте. Где вы там синий фон увидели?
Весь фон белый, есть фон при наведении

Ответить
Антон

Уже выбранный пункт в списке никак не выделен, но в целом реализация нравится.

Ответить
Дмитрий

Ничего не понятно… в стилях мы описываем какие-то классы, которых нету в выпадающем списке…

Ответить
Digrand

Стили есть, они генерируются скриптами и они нужны

Ответить
Igor

А демо?

Ответить
Digrand

Вы невнимательны, архив с демо есть в статье. Доступен для скачивания

Ответить

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

Ваш e-mail не будет опубликован.