Красивый select css: Как оформить раскрывающийся список с помощью только CSS?

07.08.2023 alexxlab

Содержание

Оформляем Select CSS! Пользовательские стили для Select на CSS

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

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

Красивый выпадающий список для сайта — делаем выпадающий список
Пользовательские стили для формы на чистом CSS без Javascript

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

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

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style. css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:

HTML КОД

1 2	<link rel="stylesheet" type="text/css" href="css/style.css" /> <script type='text/javascript' src='js/select.js'></script>

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

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД

<form action="#">
    <p>
        <label>Страны Великобритании:</label>
        <select>
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг.

Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

CSS КОД

.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.  5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.   dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «

..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД

1
2
3

. dropdownvisible {
    height: auto;
}

На это:

CSS КОД

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот 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

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

СКАЧАТЬ ИСХОДНИКИ

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

1 шаг. Подключаем необходимые файлы
2 шаг. HTML структура элемент Select
3 шаг. Добавляем стили для Select CSS
В каких браузерах этот Select CSS
Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Стилизация Select-Option (почти) без JavaScript / Хабр

Стилизация некоторых стандартных элементов — довольно нетривиальная задача.

Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.

Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.

Для стилизации остального — есть JavaScript.

Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.

На днях у меня, как это часто и бывает, возникла необходимость стилизовать выпадающий список. Однако именно выпадающим списком он становился только в мобильной версии, до этого же он вёл себя как самая обычная группа радиокнопок.

И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:

А зачем?

Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т. д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.

Небольшой ликбез:

Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.

Выпадающие списки состоят из 2 основных элементов:

Select — контейнер для всего списка
Option — элемент списка

Иногда используется ещё и OptGroup (группа элементов списка), но его реализация пока что остаётся на JavaScript’е.

Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.

Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):

Select — disabled, form, multiple, name, required, size
Option — disabled, label, selected, value

На этом, пожалуй, закончим с описанием, и перейдём к реализации.

Уже было написано немало слов, поэтому — ближе к коду:

<form>
  <div>
    <h4>Описание 0 пункта</h4>
    <input type="radio" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input type="radio" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input type="radio" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)

Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:

Select — form, name, required
Option — disabled, label, selected, value

И вот всё, что остаётся реализовать:

Select — disabled, multiple, size
Option — полностью реализовано

Всего лишь добавлением связок input + label, мы сократили список необходимого функционала с 10 пунктов до 3.

Неплохо, но ведь это не конец, верно?

Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:

<form>
  <div>
    <input type="checkbox" value="0" name="selectName" />
    <label for="selectName0">Описание 0 пункта</label>
    <input type="checkbox" value="1" name="selectName" />
    <label for="selectName1">Описание 1 пункта</label>
    <input type="checkbox" value="2" name="selectName" />
    <label for="selectName2">Описание 2 пункта</label>
  </div>
</form>

Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.

Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).

Что осталось?

Select — disabled, size
Option — полностью реализовано

Ну что ж, и Select. disabled и Select.size предельно просто реализуются с помощью CSS:

Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
Select.disabled — для контейнера нужно добавить pointer-events: none, чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.

Итак, основной функционал есть. Чего не хватает?

Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).

А теперь — примеры:

Немного реализации (выпадающее меню с единичным выбором):

И ещё немного (не выпадающее меню с множественным выбором):

Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:

Зачем это нужно?

В связи с тем, что судя по комментариям, не все понимают, для чего будет полезен данный код, считаю нужным дать некоторые разъяснения.

При стилизации выпадающих списков вида:

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

есть серьёзные ограничения стилизации. Поэтому их заменяют на простые списки:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

которым с помощью JavaScript навешивают весь необходимый функционал.

Поскольку изначально списки никак не взаимодействуют с формами, из-за этого возникают проблемы.

Мало того, что необходимо реализовать весь основной функционал:

переключение пунктов и их взаимодействие
состояния (checked, disabled)
привязка к форме и отправка данных на сервер
инициализация исходных данных (автозаполнение)
сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)

Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.
Вообще. Никак.

Для пользователя это будет выглядеть так: есть выпадающий список, но работать с ним нельзя.

Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?

Плюсы получившегося решения:

Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.
Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.

Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):

Переключение с помощью tab
Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)

Как видно, ничто из вышеперечисленных минусов не является критичным для подавляющего большинства списков, и при необходимости реализуется с помощью JavaScript, а потому. ..

Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!

UPD: как оказалось, в случае с чекбоксами атрибут required работает некорректно, и его также необходимо эмулировать с помощью JavaScript (на данный момент обязательными становятся все чекбоксы, отмеченные как required, и только они)

31 CSS Select Boxes

Коллекция бесплатных HTML и CSS настраиваемых полей выбора примеров кода: раскрывающийся список, несколько, пользовательская стрелка и т. д. Обновление коллекции за апрель 2019 года. 4 новых предмета.

Блоки выбора Bootstrap
Поля выбора jQuery
Блоки выбора попутного ветра

О коде

Пользовательский стиль поля выбора с использованием только CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Раскрывающийся список только CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Выбор (заполнитель отключен)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Пользовательское поле выбора

Пользовательский стиль выпадающего списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css

О коде

Pure CSS Select Box с эффектом наведения с учетом направления

Поле выбора Pure CSS без JavaScript. При наведении на параметр движение значка внутри параметра определяется направлением наведения, то есть наведением вверх или наведением вниз (эффект наведения с учетом направления).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css

О коде

Поле выбора Pure CSS

Выберите поле без использования JavaScript и собственного элемента.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Адаптивное пользовательское поле выбора

Отзывчивое пользовательское поле выбора с пользовательской прокруткой.

О коде

Выбор изображения

Выбор изображения с фальшивой загрузкой.

О коде

Пользовательская упаковка для выбора

Пользовательская оболочка выбора CSS.

Демонстрационное изображение: Пользовательский выбор

Пользовательский выбор

Пользовательский выбор HTML, CSS и jQuery.
Сделано Алессандро Фальки
5 апреля 2017 г.

скачать демо и код

Демонстрационное изображение: Пользовательский выбор параметра

Пользовательский выбор параметра

Пользовательский выбор, предназначенный для изменения типичного стиля выбора в браузерах с использованием JS для отображения списка при щелчке и SCSS для придания ему стиля. Выбранный атрибут работает хорошо, проверьте его.
Сделано Дэни Сантос
8 февраля 2017 г.

скачать демо и код

Демонстрационное изображение: Material Design Выберите раскрывающийся список

Material Design Выберите раскрывающийся список

Material Design выберите раскрывающийся список с HTML, CSS и JavaScript.
Сделано Сэмом Мерфи
20 января 2017 г.

скачать демо и код

Демонстрационное изображение: взаимодействие с выбором варианта

Взаимодействие с выбором параметра

Отличный пример чистой анимации. Создан с помощью TweenMax GSAP.
Сделано Бхакти Аль Акбар
7 декабря 2016 г.

скачать демо и код

Демонстрационное изображение: Поля выбора

Поля выбора

Поля выбора с HTML, CSS и JS.
Сделано Нипун Парадкар
22 октября 2016 г.

скачать демо и код

Демонстрационное изображение: Стилизованный CSS и фильтруемый раскрывающийся список выбора

Стилизованный CSS и фильтруемый раскрывающийся список выбора

Раскрывающийся список выбора — стилизованный и фильтруемый с использованием HTML, CSS и vanilla JS. Работает с использованием поля ввода для получения значения из раскрывающегося списка.
Сделано Мари Йоханнессен
13 октября 2016 г.

скачать демо и код

Демонстрационное изображение: Выбор только CSS

Выбор только CSS

Выбор только CSS (переключатель + флажок).
Сделано Аоюе
24 августа 2016 г.

скачать демо и код

Демонстрационное изображение: поле выбора с заполнителем

поле выбора с заполнителем

поле выбора HTML и CSS с заполнителем.
Сделано Джеймсом Ноулэндом
16 мая 2016 г.

скачать демо и код

Демонстрационное изображение: Выбор только CSS

Выбор только CSS

Выбор ввода с помощью радиовходов.
Сделано Николя Уди
9 мая 2016 г.

скачать демо и код

Демонстрационное изображение: Выбор Pure CSS

Выбор Pure CSS

Выбор ввода, только CSS.
Автор Рауль Баррера
8 апреля 2016 г.

скачать демо и код

Демонстрационное изображение: выпадающий список Pretty Select

Pretty Select Dropdown

Это по-прежнему использует входные данные для поддержки переменных отправки формы, но в основном полагаясь на CSS.
Сделано j0be
15 января 2016 г.

скачать демо и код

Демонстрационное изображение: Custom Select Box

Custom Select Box

Custom select box с jQuery.
Сделано Виджая Кумар Вулчи
7 января 2016 г.

скачать демо и код

Демонстрационное изображение: Material Design Select

Material Design Выберите

Material Design выберите версию jQuery.
Сделано LukyVJ
3 января 2016 г.

скачать демо и код

О коде

Параметры выбора стилей

Варианты выбора стилей с использованием CSS3 и Flexbox.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Демонстрационное изображение: горизонтальное выделение

Горизонтальный выбор

Простой горизонтальный выбор.
Сделано Бхарани
23 ноября 2015 г.

скачать демо и код

О коде

Стиль окна выбора с помощью CSS

Креативный способ оформления раскрывающихся списков выбора только с помощью CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Демонстрационное изображение: Пользовательский выбор

Пользовательский выбор

Простой способ настроить выбранные входы.
Сделано Кристофом КОРБАЛАНОМ
10 сентября 2015 г.

скачать демо и код

Демонстрационное изображение: Меню выбора

Меню выбора

Меню выбора с HTML, CSS и JavaScript.
Сделано Пьером Лораном
23 июня 2015 г.

скачать демо и код

Демонстрационное изображение: Пользовательский выбор

Пользовательский выбор

Очень простой пользовательский выбор.
Сделано Юсуфом
1 мая 2015 г.

скачать демо и код

Демонстрационное изображение: Пользовательский выбор

Пользовательский выбор

Пользовательский выбор с анимацией.
Автор Николай Таланов
5 сентября 2014 г.

скачать демо и код

Демонстрационное изображение: Selectionator

Selectionator

Доказательство концепции виджета с множественным выбором.
Сделано Бенджамином
23 мая 2014 г.

скачать демо и код

Демонстрационное изображение: раскрывающийся список колоды карт CSS3

раскрывающийся список колоды карт CSS3

раскрывающийся список колоды карт HTML, CSS и JS.
Автор Тибор Кательбах
23 июля 2013 г.

скачать демо и код

29 jQuery Select/Multiselect Boxes

Коллекция бесплатных jQuery select/multiselect box примеров кода и плагинов от Codepen, Github и других ресурсов. Обновление коллекции марта 2021 года. 1 новый предмет.

Поля выбора CSS
Bootstrap Select Box
Блоки выбора попутного ветра

Примеры полей выбора
Плагины Select Box

О коде

Пользовательское поле выбора

Пользовательское поле выбора с небольшим jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Взаимодействие с выпадающим меню

Взаимодействие с выпадающим меню в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery.js

О коде

Выбор меню взаимодействия

Анимированное взаимодействие меню выбора в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery. js

О коде

Выберите раскрывающийся список

Создана живая версия раскрывающегося списка выбора из руководства по стилю Gear CMS, темная и светлая версии.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery.js

О коде

Модный множественный выбор

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Выберите поля

Небольшая форма для демонстрации того, как вы можете использовать DL , DT и DD , чтобы оживить ваши избранные коробки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Адаптивное пользовательское поле выбора

Отзывчивое пользовательское поле выбора с пользовательской прокруткой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: selected.css, jquery.mCustomScrollbar.css, jquery.js, jquery.nicescroll.js

С код

Анимированный блок выбора

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery.js

О коде

Многофункциональный выбор jQuery

Преобразует <выбрать несколько> элементов в выпадающие меню с флажками.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: jquery.multi-select.js

О коде

Блоки выбора

Анимированные поля выбора в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome.css, jquery.js

О коде

Выберите вариант взаимодействия

Создано с помощью TweenMax GSAP.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: tweenmax.js textplugin.js

О коде

Блок выбора дизайна материала

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: bootstrap.css, jquery.js, jquery.scrollTo.js

О плагине

Выберите2

Select2 — это замена полей выбора на основе jQuery. Он поддерживает поиск, удаленные наборы данных и разбиение результатов на страницы.

О плагине

Выберите

Selectize — это гибрид текстового поля и поля выбора . Он основан на jQuery, имеет автозаполнение и навигацию с помощью клавиатуры; полезно для тегов, списков контактов и т. д.

О плагине

Выбор начальной загрузки

com/silviomoreto/bootstrap-select»> Bootstrap-select — это подключаемый модуль jQuery, который использует Bootstrap dropdown.js для стилизации и добавления дополнительных функций к стандартным элементам выбора.

О плагине

Множественный выбор

Плагин jQuery для выбора нескольких элементов с помощью флажков.

О плагине

Плагин окна выбора jQuery

Подключаемый модуль jQuery, который постепенно преобразует поле выбора HTML в раскрывающийся список с одним параметром. Раскрывающийся список можно дополнительно стилизовать с помощью Twitter Bootstrap, jQueryUI ThemeRoller или jQuery Mobile, дополнительно анимировать с помощью эффектов отображения/скрытия jQueryUI и работать в настольных, планшетных и мобильных браузерах.

О плагине

jQuery Selectric

com/lcdsantos/jQuery-Selectric»> jQuery Selectric — это подключаемый модуль jQuery, разработанный для помощи в стилизации и управлении выборками HTML.

О плагине

Custom Select Box Style Плагин CSS

Легкие, ненавязчивые, настраиваемые поля выбора с jQuery.

О плагине

jQuery Хороший выбор

Легкий подключаемый модуль jQuery, который заменяет собственные элементы выбора на настраиваемые раскрывающиеся списки.

О плагине

Цепь

Chained — простой плагин для последовательного выбора. Он работает как с jQuery, так и с Zepto. Вы можете выбрать одну из двух разных версий. Используйте jquery.chained.js, если вы не хотите делать внешние запросы для настройки содержимого дочерних элементов. Эта версия использует атрибуты данных для определения содержания.

О плагине

jQuery SelectBox

Плагин jQuery для замены элементов select .

О плагине

Выбери или умри

Еще один плагин jQuery для стилизации выбранных элементов.

О плагине

Простые раскрывающиеся эффекты

Плагин jQuery для преобразования выбранных входных данных в раскрывающиеся списки с некоторыми простыми эффектами расширения.

О плагине

jquery.sumoselect

Плагин jQuery, который постепенно расширяет поле выбора HTML до раскрывающегося списка с одним или несколькими параметрами. Выпадающий список можно полностью настроить с помощью простого CSS.

О плагине