Select стилизация css jquery

Содержание

29 jQuery Select/Multiselect Boxes

Collection of free jQuery select/multiselect box code examples and plugins from Codepen, Github and other resources. Update of March 2021 collection. 1 new item.

Table of Contents:

Select Box Examples

Author

Links

Made with

About a code

Custom Select Box

Custom select box with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Dropdown menu interaction in jQuery.

Читайте также: Заголовок страницы

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Animated select menu interaction in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Created a live version of the select dropdown from the Gear CMS styleguide, dark & light version.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Fancy Multiple Select

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Select Fields

Just a little form to showcase how you can use DL , DT & DD to spice up your select boxes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Responsive Custom Select Box

Responsive custom select box with custom scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: chosen.css, jquery.mCustomScrollbar.css, jquery.js, jquery.nicescroll.js

Author

Links

Made with

About a code

Animated Selected Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

jQuery Multi Select

Converts elements into dropdown menus with checkboxes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Select-Boxes

Animated select boxes in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Author

Links

Made with

About a code

Select Option Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: tweenmax.js textplugin.js

Author

Links

Made with

About a code

Material Design Select Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js, jquery.scrollTo.js

Select Box Plugins

Select2

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.

Selectize

Selectize is the hybrid of a textbox and select box. It’s jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

Bootstrap Select

Bootstrap-select is a jQuery plugin that utilizes Bootstrap’s dropdown.js to style and bring additional functionality to standard select elements.

Multiple Select

jQuery Select Box Plugin

A jQuery plugin that progressively enhances an HTML select box into a single option dropdown list. The dropdown list can be optionally styled with Twitter Bootstrap, jQueryUI ThemeRoller, or jQuery Mobile, optionally animated with jQueryUI show/hide effects, and works on desktop, tablet, and mobile browsers.

jQuery Selectric

Custom Select Box CSS Style Plugin

jQuery Nice Select

Chained

Chained is simple plugin for chained selects. It works with both jQuery and Zepto. You can choose from two different versions. Use jquery.chained.js if you do not want to make external queries for setting content of child selects. This version uses data attirbutes to decide the content.

jQuery SelectBox

Select-or-Die

Simple Drop Down Effects

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

jquery.sumoselect

A jQuery plugin that progressively enhances an HTML select box into a single/multiple option dropdown list. The dropdown list can be fully customizable using simple CSS.

Minimalect

Multiselect

jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side.

jQuery MultiSelect

Turn a multiselect list into a nice and easy to use list with checkboxes. This plugin is simply an alternative interface for the native select list element. When you check an option in the plugin the value is selected on the native list. This allows the value to be submitted in a form as well as retreived through normal POST/GET and javascript methods.

Selectator

Selectator is a jQuery-based replacement for select boxes. It supports searching, custom renderers, remote data (ajax), search delay, minimum search length, selection remove/clear and placeholders. It affects the original select box directly, which is used as the data container.

Источник

jQuery-плагин для стилизации селектов

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей. Не поддаются полной стилизации следующие элементы html-форм:

раскрывающийся список ;
флажок ;
переключатель .
поле для отправки файла .

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

Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.

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

Демонстрация работы плагина

На отдельной странице вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.

Достоинства

При отключенном JavaScript отображаются стандартные селекты.
Небольшой размер скрипта, примерно 4 килобайта.
Работает в IE6+ и всех современных десктопных браузерах.
Выводится внутристрочно.
Легко поддается оформлению через CSS.
Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height ).
Автоматически подстраивает ширину, если она не указана.
Поддерживает прокрутку колесом мыши.
Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
Поддерживает атрибут «disabled».
Работает и с динамически добавляемыми/изменяемыми селектами.

Недостатки

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

Скачать

Плагин недоступен, т.к. он уже не актуален.

jQuery-плагин «SelectBox Styler»

Версия: 1.0.1 | Загрузок: 11104 | Размер: 7 Кб | Последнее обновление: 07.10.2012

Обновления

22.09.2012 Переделал скрипт в плагин (в том числе сделал минимизированный вариант), а также добавил поддержку динамического добавления/изменения селектов. 07.10.2012 Исправлено поведение скрипта при использовании метода onchange у тега

Подключение плагина

HTML-код после выполнения плагина

Его структура выглядит следующим образом:

CSS-классы, используемые для оформления селекта

Чтобы оформить селекты с помощью CSS, используйте следующие классы:

.selectbox	родительский контейнер для всего селекта
.selectbox .select	селект в свернутом состоянии
.selectbox.focused .select	фокус на селекте, когда нажата клавиша Tab
.selectbox .select .text	вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей»
.selectbox .trigger	правая часть свернутого селекта (условный переключатель)
.selectbox .trigger .arrow	вложенный тег для переключателя (стрелка)
.selectbox .dropdown	обертка для выпадающего списка
.selectbox .dropdown ul	выпадающий список
.selectbox li	пункт (опция) селекта
.selectbox li.selected	выбранный пункт селекта
.selectbox li.disabled	отключенный (недоступный для выбора) пункт селекта

Заключение

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

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

Смотрите также

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select) 2614 комментариев
jQuery-плагин для стилизации input[type=»radio»] 38 комментариев
jQuery-плагин для стилизации input[type=»checkbox»] 35 комментариев
Цифровые часы на чистом CSS и jQuery 41 комментарий

Комментарии (105)

Недостатоток огараничение ширины у выпадающего списка, то есть если select 100px то и выпадающий список тоже 100px, и значение option будет записываться больше одной строке!

у вас проблема со скриптом. Если значение value у option не совпадает с текстом в нём, то что глюк в скрипте?

li.filter(':not(.disabled)').click(function() < var liText = $(this).text(); var value = $(this).attr('id'); if(value != '') < el.val(value); >else < el.val(liText); >el.change(); $(divText).val(liText); $(this).addClass('selected sel').siblings().removeClass('selected sel'); $(this).toggleClass('selected'); dropdown.hide(); >);

Сюрприз, однако. disabled я реализовал только для тега option , а про select и думать забыл, что у него тоже может этот параметр использоваться. В скором времени добавлю поддержку.

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

Популярные
Последние
Рубрики

Универсальный jQuery-скрипт для блоков с вкладками (табами) 978 комментариев
«Хлебные крошки» для WordPress без использования плагина 690 комментариев
Постраничная навигация в WordPress без плагина (альтернатива WP-PageNavi) 228 комментариев
Безболезненный перенос сайта на WordPress на новый домен 270 комментариев
Плагин для WordPress «Предпросмотр комментария» на jQuery 249 комментариев
Как с помощью CSS прижать footer к низу окна браузера 161 комментарий
Загрузка части контента на WordPress с помощью AJAX 198 комментариев

FAQ на тегах details и summary с анимацией и микроразметкой
Слайдер-превью изображений при наведении мыши 16 комментариев
Разметка WordPress-меню по БЭМ с помощью волкера 7 комментариев
Удаляем ссылку у текущего пункта меню WordPress 8 комментариев
WordPress: добавляем в меню счетчик записей для таксономий 4 комментария
WordPress: выводим список всех тегов (меток) в рубрике 5 комментариев
User CSS — браузерное расширение для добавления пользовательских стилей к сайтам 20 комментариев

CSS-верстка
jQuery и JavaScript
WordPress
Браузеры
Веб-мастеринг
Интернет
Манимейкинг
Познавательно
Программы
Продвижение сайта

© 2006–2023 Dimox.name. Все права защищены. Перепечатка запрещена.

Источник