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

26.10.2016

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

Рассмотрим один из способов стилизации выпадающих списков.

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

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

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

 Скачать, смотреть демо

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

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 по своему желанию. Успех вам гарантирован.

 

Мария

Шел 2022 год
Архив не скачивается
Демки нет
Проверить код невозможно
Параша

Відповіcти
Digrand

Спасибо за сигнал.
Fixed

Відповіcти
Параша

Параша. Хоть бы проверили, что в архивах лежит

Відповіcти
Digrand

Параша у тебя в штанах. А в архивах лежит то что должно лежать. Если руки кривые, иди на стройку работать

Відповіcти
Александра

А если используется несколько select на одной странице, как быть?
Данный скрипт работает только с одним селектом, другие он не видит.

Відповіcти
Александра

Разобралась, спасибо!
селект – обязательное условие для одного селекта.

Відповіcти
Серж

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

Відповіcти
Vlad

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

Відповіcти
Digrand

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

Відповіcти
Антон

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

Відповіcти
Дмитрий

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

Відповіcти
Digrand

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

Відповіcти
Igor

А демо?

Відповіcти
Digrand

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

Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.