Изменение внешнего вида поля ввода у формы через JQuery


Содержание

Jquery Добавление клонирования полей формы — имя приращения

Я смотрю на эту скрипку http://jsf > который делает то, что мне нужно сделать с одним исключением.

Когда вы загружаете, у него есть одно поле ввода с именем ‘phone_number’

Когда вы нажимаете на Add phone number Вы можете добавить несколько строк / полей ввода как таковые:

Каждое новое добавленное поле ввода имеет увеличенное имя. Например: phone_number1, phone_number2 и т. д. Это отлично работает.

Но я бы хотел, чтобы текст перед каждым полем ввода также содержал добавленное значение, так что вы получите:

Таким образом, текстовое описание увеличивается на то же значение, что и поле phone_number.

то есть: номер телефона 2 = номер телефона2 и т. д.

Как я могу это сделать ?

Решение

Оберните текст с помощью span

Тогда вы можете изменить только текст внутри span

Другие решения

вместо того, чтобы давать каждому вводу разные имена, вы можете использовать name = «phoneNumber []» и циклически перемещаться по клавишам сообщений в бэкенде.
Демо-версия: http://jsf >

Вы можете использовать интервал после «номера телефона» в своем HTML.

Обращаясь поля ввода от формы объекта через JQuery?

Это либо полностью нуб или у меня старший момент. У меня есть форма HTML, который я обрабатываю с AJAX на представить следующим образом:

OK, а не линии jQuery(‘#sendSongForm input#senderName’) как Обращаюсь тот же ввод с помощью объекта sendSongForm ?

. но это не работает.

В Firebug я вижу , что есть массив в sendSongForm , который содержит все члены полей. Но я не должен быть в состоянии пройти sendSongForm(the form object) с JQuery, а?

Автоматический сбор данных из полей input для формы jquery

Очень часто нужно собрать все значения из полей input и отправить PHP-обработчику. Можно использовать много раз функцию val(). Если количество полей будет больше 20, то вам придётся 20 раз использовать val(). Это неудобно! На помощь придёт функция serialize(). Она сама сформирует часть строки с параметрами. Вам нужно будет указать обработчик и пристыковать передаваемые параметры.

Есть один недостаток. Вы не сможете что-то изменить в строке «title=title&text=other+text&cat=category». Изменить данные можно, но это придется использовать: регулярные выражения, функцию replace. Это неудобно. Я предлагаю вам функцию serializeArray(). serializeArray() собирает все данные в массив, а не в строку. Данные в массив попадают в виде объектов.

После применения функции в переменной values находится массив объектов. Обратите внимание на то, что ключом в каждом объекте является свойство name. Если у элементов input не будет атрибута name, то функция serializeArray() не сработает. Теперь у вас есть возможность обратиться к элементу массива и изменить его свойство. Есть еще одна крутая функция serializeObject(). Я взял её из интернета.

Обратите внимание что создаётся объект с ключами и значениями. Это очень удобно. Вы можете изменить любое значение налету values.cat = ‘javascript’. В предыдущей функции serializeArray() для того чтобы изменить значения у элемента массива нужно было бы обращаться к элементу массива по ключу (индексу) v[0].name = ‘javacript’;. Это неудобно. В данном примере изменить значение объекта очень просто и удобно values.cat = ‘jquery’. Следите за тем чтобы у input свойства name не повторялись.

Вы можете выбирать значение из каждого поля по селектору или id. Смотрите статью как получить поменять значение элемента val() jquery.

jQuery — Получить значение полей формы

Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.

jQuery – Получения данных формы с помощью метода each

Работу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.

В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов ( name и value ) элементов.

При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.

Для отправки данных на сервер (например, по технологии AJAX) можно использовать метод jQuery ajax .


jQuery — Сериализация формы

В jQuery для получения всех полей формы input , textarea и select можно использовать следующие методы:

  • serialize() — предназначен для сериализации данных формы в строку запроса.
  • serializeArray() — выполняет кодирование элементов формы в массив, состоящий из имен и значений.

Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.

Например, рассмотрим, как можно перебрать массив, который вернул метод serializeArray , с помощью функции each :

Цукерберг рекомендует:  Html - Объясните пожалуйста почему не работает код html и php

Если же вы собираете данные для того чтобы их передать в метод библиотеки jQuery ajax, то в этом случае неважно, какой из этих методов использовать. Т.к. данный метод может принимать данные, закодированные как с помощью метода serialize , так и посредством serializeArray .

Для того чтобы элемент был сериализован методом serialize или serializeArray , он должен отвечать критериям «successful controls», указанным в спецификации HTML. Первое условие «successful controls» – это наличие у элемента атрибута name . Второе, если форма отправлена не с помощью кнопки submit , то она (имя и значение кнопки) не будет добавлена в возвращаемую методом строку или массив. Третье, значения из элементов checkboxes и radio кнопок ( input с type «radio» или «checkbox») будут включены в набор только в том случае, если они установлены (отмечены). Четвёртое, элементы, которые отключены, обработаны не будут. Т.е. для того чтобы элемент был сериализован, он должен иметь false в качестве значение свойства disabled (другими словами, у элемента обязан отсутствовать атрибут disabled ).

Внимание: Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.

Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода serialize или serializeArray . Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery ajax . Ответ, который прийдёт с сервера вставим в элемент с идентиикатором form_result .

PHP код, обрабатывающий ajax запрос на сервере:

Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).

Сериализация формы с помощью методов jQuery serialize и serializeArray

Кроссбраузерная стилизация input[type=»file»] на CSS + jQuery

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

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

Для решения задачи нам поможет тег label, который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.

1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:

И выглядит все это пока так:

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

2. Теперь мы напишем небольшой скрипт, который как раз и будет выводить нам информацию о файле:

Код желательно вставить перед закрывающим тегом

Маска ввода для полей HTML форм на jQuery

Последнее изменение поста: 24 октября 2020 в 0:28

В данном уроке мы рассмотрим как с помощью js плагина masked input создавать различные маски ввода для текстовых элементов форм.

Примеры масок созданных при помощи masked input: jsfiddle.net/webrevenue/zfn82pLh/1/

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

Подключение masked input

Код приведенный ниже, необходимо подключить к сайту (если у вас уже подключен jQuery, то его подключать не нужно)

Создание HTML маски ввода

Создания маски ввода в js коде осуществляется с помощью следующих знаков:

  • Цифра 9 – соответствует цифре от 0 до 9.
  • Символ a – представляет собой любой английский символ (A-Z, a-z).
  • Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).


Пример создания маски ввода телефона для элемента input, имеющего >

jquery Событие изменения любого инпута (поля ввода) формы — селекторы и пример обработки

Primary tabs

Forums:

Используя метод on(), можно привязать обработку события изменения значений на форме (причем для кода ниже обрабатываться будут и динамически добавляемые на страницу поля формы):

  • filedsContainerSelector — любой селектор, в которой упокованы ваши поля, это может быть или вообще весь документ, или, что более вероятно: селектор формы, или вообще какой-то подгруппы её полей.
  • ‘change keydown’ — перечисляем конкретные обрабатываемые события, в моём случае хватило этих

Стилизация всех элементов форм, с помощью CSS и jQuery

Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, select, label.

Кликнув по кнопке «Демо» можете наглядно увидеть какой результат мы получим в конце урока. Нажав на исходники Вы можете скачать абсолютно весь исходный код вместе с комментариями.

Введение

  • Тег input предназначен для создания текстовых полей, кнопок (submit, button, file, text), переключателей (radio) и флажков (checkbox).
  • Тег texarea — используется для создания текстового поля для ввода нескольких строк текста.
  • Тег select применяется для создания выпадающего списка в котором можно сделать один или множественный выбор.
  • Тег label — для подписи к элементам форм.

Примечание*: каждый тег формы имеет атрибут value — в него вносится значение, которое пользователь ввел или выбрал, и именно это значение передается на сервер.

В этом практикуме я продемонстрирую как с помощью CSS и jQuery стилизовать эти элементы. Начнем с самых простых, а как окажется позже вся стилизация очень простая. Приступим.

Для начала создадим обычную форму, самую простую:

Первым рассмотри тег Input.

Input

В HTML его выводят вот таким способом:

Обязательным параметром тега input является атрибут type (тип, это может быть текст [text], кнопка отправки [submit], скрытое поле [hidden], переключатель [radio], чекбокс [checkbox], загрузка файла[file]).

Для стилизации этого тега jQuery не требуется, главное помнить, что браузеры неоднозначно работают с его высотой, поэтому высоту этого элемента стоит подбирать исходя из размера шрифта, который Вы будете использовать и чтобы слова не чёркали по рамке нужно добавлять отступ (padding)

Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:

Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.

Textarea

Данный тег на HTML страницу выводится так:

по умолчанию у этого тега присутствуют некоторые параметры:

  • за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
  • справа присутствует постоянная прокрутка в браузерах IE


уберем эти мелочи, открываем наш файл стилей и пишем следующие свойства:

Теперь наше поле для ввода текста имеет привлекательный вид. Следующим этапом стилизируем переключатели radio.

Radio Button

На HTML странице радио переключатели выводятся так:

К сожалению, стилизации с помощью CSS эти волшебные переключатели не поддаются, но есть jQuery и все будет круто. Суть моего метода очень простая: вместо тегов input я буду писать столько тегов div сколько предполагалось переключателей, плюс в них буду вносить текст с заданными значениями и будет всего лишь один скрытый input, в который будет заносится текстовое значение с нажатого div’a. теперь давайте реализуем эту идею.

Для начала создадим HTML разметку:

Теперь стили. Каждый div будет иметь фоновую картинку пустого переключателя (именно ее Вы сможете поменять на свою любимую или ту что Вам нарисует дизайнер), а если по div’у произошло событие клика то ему еще добавится класс active и сменится фоновое изображение на включенный переключатель

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

Наконец-то дошла очередь до jQuery (:

Если посмотреть работу данного скрипта через firebug для Firefox или через средства разработки Google Chrome, то картина будет более наглядной.

Давайте займемся теперь стилизацией чекбоксов.

Checkbox

Чекбоксы выводятся на HTML страницу таким же методом как и radio переключатели:

Со стилизацией с помощью одного CSS тут та же история, что и с radio кнопками. Для стилизации чекбоксов нужен немного другой логический подход: выводим столько чекбоксов сколько задано но вместо атрибута checkbox ставим атрибут hidden и перед каждым input’ом добавим div:

дальше добавим стилей, для активного и неактивного чекбокса

теперь очередь jQuery:

А теперь займемся селектами:

Select

На HTML страничку селекты выводятся так:

Реально кучу плагинов jQuery для их стилизации, но мой метод я считаю самый правильный, суть его такая же как и в случае с radio кнопками, только здесь вместо дивов будет использоваться список, который выпадает по клику на ссылку, а потом при клике на ссылку из выпадающего списка ее текстовое значение будет заносится в скрытый инпут и в первую ссылку по которой кликнули. Все очень просто)))

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

Теперь добавим стилей для всего этого дела

ну и без jQuery опять никуда:

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

Input type=file

По умолчанию инпут с таким атрибутом добавляет на страницу кнопку обзора для выбора файла и текстовое поле в котором отображается имя загруженного файла. Моя задача сейчас показать Вам как можно стилизовать эту конструкцию.

Итак для стилизации кнопки нужно создать следующую разметку:

Которой добавим таких стилей:

Тут я сделал такой финт: стандартный инпут делаем прозрачным и задаем огромный шрифт, чтобы кнопка обзора была достаточно большой и закрывала весь контейнер, позиционируем его абсолютно по правому краю контейнера (потому что курсор-рука появялется тока на кнопке «обзор»).

Под инпутом который вызывает окно загрузки располагаем еще один инпут, который будет отображать имя файла который мы загрузили и кнопку обзор все стили я написал)

Теперь добавим script который будет показывать имя прикрепленного файла и еще напишем хувер для кнопки если загрузчик получил фокус:

Как оказалось ничего сложного.

Дальше займемся кнопкой сброса формы (reset form).


Input type=reset

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

И добавим стилей кнопочке сброса:

Вот опять все просто)

И заключительным этапом будет кнопка отправки формы.

Input type=submit

Как я уже писал выше, тег инпут предназначен не только для полей ввода, переключателей и чекбоксов, с его помощью так же делаются кнопки. Делают их корректным объявлением атрибута type: button или submit, атрибут submit говорит о том что при клике на этот инпут данные из формы будут переданы на сервер. На страничку его добавляют так:

а теперь немножко стилей:

Заключение

Вот и все, если не все, то некоторые моменты будут Вам полезны. Мои познания в jQuery не максимальны, если у Вас есть предложения по усовершенствованию кода, буду признателен если Вы напишите его в комментариях.

Работа с Input Text jQuery

Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:

А jQuery связывается с ним по атрибуту (селектор #text ).

Получить содержимое текстового поля

Добавить значение в текстовое поле

Добавить текст перед и после значения

Очистить поле

Удалить поле

Метод remove() удаляет элементы из DOM включая дочерние.

Добавить/удалить CSS класс

Метод addClass() добавляет в атрибут значение, а removeClass() удаляет его.

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

jQuery Form Styler — плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы:

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

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

Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS.

Достоинства

  • Общее:


  • Простота оформления с помощью CSS.
  • При отключенном JavaScript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
  • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
  • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
  • Поддержка атрибутов checked , selected , disabled .
  • Атрибуты class , id , data-* , title , указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы ( id передается с суффиксом, чтобы избежать дублирования).
  • Поддержка динамического добавления/изменения атрибутов class , id , data-* , title .
  • Поддержка сброса формы при нажатии на .
  • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
  • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
  • Поддержка валидации HTML5.
  • Поддержка мультиязычности.

Для селектов:

  • Поддерживает атрибут multiple , т.е. позволяет выбирать несколько пунктов (мультиселект).
  • Поддерживает группировку элементов списка в селекте (тег ).
  • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height , либо через опцию selectVisibleOptions ).
  • Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
  • Поддержка поиска по пунктам одиночного селекта.
  • Поддержка замещающего текста (placeholder).
  • Автоматически подстраивает ширину, если она не указана.
  • Поддерживает прокрутку колесом мыши.

Недостатки

При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.

  • В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.
  • Скачать

    Плагин «jQuery Form Styler»

    Версия: 2.0.1 | Последнее обновление: 29.08.2020

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

    Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

    Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом :

    Файл jquery.formstyler.css — это обязательные стили, необходимые для корректной работы плагина, а jquery.formstyler.theme.css — визуальное оформление элементов форм.

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

    Отключение плагина (метод destroy)

    Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy :

    Динамическое изменение

    При динамическом изменении элементов формы необходимо запустить триггер refresh , например:

    При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger(‘refresh’) необходимо запускать, используя setTimeout , иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

    Опции плагина

    Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

    Опция По умолчанию Описание data-атрибут
    idSuffix -styler суффикс к атрибуту id , передаваемому от стилизуемого элемента
    filePlaceholder Файл не выбран текст по умолчанию в поле выбора файла (когда файл не выбран) data-placeholder
    fileBrowse Обзор. текст кнопки у поля для выбора файла data-browse
    fileNumber Выбрано файлов: %s текст после выбора нескольких файлов, вместо %s вставится число data-number
    selectPlaceholder Выберите. замещающий текст (плейсхолдер) в одиночном селекте; отображается, если по умолчанию выбран первый пункт с отсутствующим текстом: data-placeholder
    selectSearch false показывать поисковое поле в одиночном селекте ( true — да, false — нет) data-search
    selectSearchLimit 10 минимальное количество пунктов одиночного селекта, при котором показывать поиск data-search-limit
    selectSearchNotFound Совпадений не найдено текст сообщения о том, что нет пунктов, удовлетворяющих поиску data-search-not-found
    selectSearchPlaceholder Поиск. текст по умолчанию в поисковом поле data-search-placeholder
    selectVisibleOptions количество отображаемых пунктов списка в простом селекте без прокрутки data-visible-options
    selectSmartPositioning true умное позиционирование для выпадающего списка селекта:
    true — работает вверх и вниз
    false — работает только вниз
    ‘-1’ — позиционирование отключено
    data-smart-positioning
    locale ru текущая локаль
    locales английская локализация массив локалей с переводом соответствующих опций, подробнее смотрите здесь

    Колбеки (callbacks)

    Название По умолчанию Описание
    onSelectOpened function() <> запускается при раскрытии списка селекта, целевой селект можно захватить через $(this)
    onSelectClosed function() <> запускается при закрытии списка селекта, целевой селект можно захватить через $(this)
    onFormStyled function() <> запускается после выполнения плагина

    Локализация

    Плагин поддерживает многоязычность. Для этого используются опции locale и locales .

    Пример локализации (английская по умолчанию включена в плагин):

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

    Чекбокс
    .jq-checkbox чекбокс по умолчанию
    .jq-checkbox__div дополнительный вложенный тег
    .jq-checkbox.checked выбранный чекбокс
    .jq-checkbox.disabled неактивный (недоступный для выбора) чекбокс
    .jq-checkbox.focused фокус на чекбоксе, когда нажата клавиша Tab
    .jq-checkbox span дополнительный вложенный тег
    Радиокнопка
    .jq-radio радиокнопка по умолчанию
    .jq-radio__div дополнительный вложенный тег
    .jq-radio.checked выбранная радиокнопка
    .jq-radio.disabled неактивная (недоступная для выбора) радиокнопка
    .jq-radio.focused фокус на радиокнопке, когда нажата клавиша Tab
    .jq-radio span дополнительный вложенный тег
    Поле для выбора файла
    .jq-file родительский контейнер
    .jq-file.focused фокус на поле
    .jq-file.changed файл выбран
    .jq-file.disabled неактивное поле
    .jq-file__name поле с именем файла
    .jq-file__browse кнопка выбора файла
    Поле для ввода чисел
    .jq-number родительский контейнер
    .jq-number.focused фокус на поле
    .jq-number.disabled неактивное поле
    .jq-number__field обертка для поля ввода
    .jq-number__spin.minus кнопка «минус»
    .jq-number__spin.plus кнопка «плюс»
    Селект (простой)
    .jq-selectbox родительский контейнер
    .jq-selectbox.opened выпадающий список селекта раскрыт
    .jq-selectbox.dropup выпадающий список селекта раскрыт вверх
    .jq-selectbox.dropdown выпадающий список селекта раскрыт вниз
    .jq-selectbox.changed выбрано значение, отличное от заданного по умолчанию
    .jq-selectbox__select селект в свернутом состоянии
    .focused .jq-selectbox__select фокус на селекте, когда нажата клавиша Tab
    .disabled .jq-selectbox__select неактивный (недоступный для выбора) селект
    .jq-selectbox__select-text дополнительный вложенный тег для свернутого селекта
    .jq-selectbox .placeholder замещающий текст
    .jq-selectbox__trigger правая часть свернутого селекта (условный переключатель)
    .jq-selectbox__trigger-arrow вложенный тег для переключателя (стрелка)
    .jq-selectbox__dropdown обертка для выпадающего списка
    .jq-selectbox__search обертка для поискового поля
    .jq-selectbox__search input поисковое поле
    .jq-selectbox__not-found сообщение об отсутствии результатов поиска
    .jq-selectbox ul выпадающий список
    .jq-selectbox li пункт (опция) селекта
    .jq-selectbox li.selected выбранный пункт селекта
    .jq-selectbox li.disabled неактивный (недоступный для выбора) пункт селекта
    .jq-selectbox li.optgroup заголовок для группы пунктов
    .jq-selectbox li.option пункт списка в группе
    Селект (множественный)
    .jq-select-multiple родительский контейнер
    .jq-select-multiple.disabled неактивный (недоступный для выбора) селект
    .jq-select-multiple li пункт (опция) селекта
    .jq-select-multiple li.selected выбранный пункт селекта
    .jq-select-multiple li.disabled неактивный (недоступный для выбора) пункт селекта
    .jq-select-multiple li.optgroup заголовок для группы пунктов
    .jq-select-multiple li.option пункт списка в группе
    Прочие элементы (только CSS)
    .styler класс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)

    История изменений

    Стилизация без плагина

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

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих