![jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)](https://dimox.name/wp-content/themes/dimox.name/cache/ae/82a1275cea527ae_150x100.png)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...
Комментарии (2 614)
Здравствуйте.
Есть такая конструкция
Однако, после применения стайлера, данный пункт списка перестает работать.
Как неоднократно писали в комментариях нужно onClick заменить на onChange, но эффекта никакого это не дало.
Я что-то делаю не так? Как заставить отрабатывать стилизованные пункты выпадающего списка?
onChange нужно вешать на select, а не на option. На демо-странице есть такой пример.
О! Как же я не заметил. Спасибо.
Если не трудно, подскажите, как этим одним onChange заменить onClick прописанных в сотне option?
У вас на каждом пункте уникальное название функции. А надо делать одну общую функцию, повешенную на select, и уже через нее работать с пунктами.
Спасибо.
Применил следующий вариант.
Спасибо! Отличный плагин. Использовал с WordPress Contact Form 7, отлично сработало
Здравствуйте. Подскажите пожалуйста, а как можно реализовать select сразу с input search, чтобы по клику на него выпадал список всех option’s. Вообщем, сделать такой select, только без стандартного блока selectbox__select и за место него input search с поиском по option’s.
Пример ibb.co/kZoBen
В данном плагине такое невозможно.
Возможно ли видоизменить текст получаемый из option? Есть ли возможность, например, изменить цвет только части текста, или расстановка переносов строки в тегах?
Такой возможности нет.
Стал думать в сторону модификации уже выведенного на страницу текста посредством JS-скрипта. Не могу понять, как происходит сопоставление сформированных li-блоков и options исходного селекта. То есть подменив ul — li сформированные Вашим скриптом на ul — li — элементы включающие, например теги:
теряется связь c options (если не связь, то, скажем так, клик по новому li не приводит к клику по options который обрабатывается onchange).
Подскажите в какую сторону копать?
Как сделать drop_up наверх у простого селекта. Я просто тупой не могу разобраться. Что и где нужно дописать?
Такой возможности нет.
К сожалению на днях, перестал работать одиночный селект на IOS, а точнее на Safari. Возможно подскажите решение?
Проверял у себя на сайте и у вас на демо, с телефона и Chrome на ПК в режиме адаптивного дизайна под iPhone/iPad
И не только на IOS, но и на Android.
Так же не работает и мультиселект. Все ломается при применении
для динамического контента.
То есть, на данный момент выходом не использовать динамический контент?
У меня ничего не поменялось, работает, как и раньше.
В примерах-то кнопки не работают www.dropbox.com/s/jti0pyvvm264u4r/Screenshot_2018−04−09−18−42−20−712_com.android.chrome.png?dl=0
Мультиселекты на Android или iOS намеренно не стилизуются, поэтому и данные кнопки не работают.
Нашел банальное решение проблемы, когда не отображалось на IOS или на некоторых других устройствах.
Убрал стиль скрывающий оригинальный селект style="display:none;".
Не помню только, прописан ли он в инструкции установки плагина, или это была лично моя инициатива добавить его к селекту, чтобы не было видно загрузки оригинального. Вообщем если есть у кого-то похожие «проблемы» будет решение.
В плагине он не скрывается через display: none.
Замечено, что не работает при использовании. trigger ('refresh'), а без — мультиселект стилизуется.
Попробывал удалить
в этом куске
Но ничего не изменилось, не работает дальше
Я имел ввиду не в коде плагина, а уже в собственных скриптах. Как в примере https://dimox.name/jquery-form-styler/#dinamicheskoe-izmenenie-2
В такоем случае, он у меня не используется.
А есть какой то способ сделать на андроиде нативный выпадающий список, так же как на ios барабан появляется, при нажатии на стилизованный select?
Подскажите, как быть если у тебя на странице два селекта, и у каждого свои стили.
Простая конструкция $('select').styler (); тут определенно не поможет. Надо что-то добавить. Что?
Добавьте каждому свой класс и через него оформляйте.
В этом и вопрос. Как это сделать?
Плагин создает в DOM-дереве теги с классами «jq-selectbox__select» и «jq-selectbox__dropdown»
http://static2.keep4u.ru/2018/04/26/EEaf7d012ae41abe73.png
Как сделать чтобы вместо этих классов он присваивал другие, которые укажу. И для каждого select нужен свой класс
На сайте не нашел ответа как это сделать
Здравствуйте.
Подскажите пожалуйста в чем может быть проблема.
У меня есть скрипт, который заносит сумму в поле input при выборе option в select.
При стилизации вашим select перестает работать.
webchikof.com
На сайте нажмите на кнопку «рассчитать стоимость сайта».
Заранее благодарю)
В чужих скриптах мне не разобраться.
Скрипт заносит данные в поле input text, через обычный select всё работает и на ios работает.
Еще заметил, что если выбрать что-то в select и потом нажать на checkbox, то данные заносятся в поле input text.
Возможно не хватает какого-то обновления в select.
Сможете натолкнуть на решение проблемы или где копать?
Не получается для select применить disabled.
Вообще, требуется, чтобы при первоначальной загрузке страницы второй из селектов был отключен, после выбора значения в первом и загрузки данных во второй, второй включился, но на первом же этапе проблема, disabled прописанное в селекте не отрабатывает (
Для себя решил вопрос использование блока с абсолютным позиционированием поверх второго селекта, с последующим его удалением. Мало ли, вдруг кому пригодится
Вот написал точно такое же на нативном JS. Обратил внимание, что браузер не желает отображать текущее состояние свойств checked, selected. То есть console. log (element.checked) и console. log (element.selected) не выводит актуального состояния bool значения. Попутно загемороился с одиночным атрибутом, если указано не по системе Strict HTML, где надо прописывать атрибут selected="selected". Собственно, я думал, что jQuery говно и баг в ней. Написал на чистом JS — баг тот же. Но jQuery все равно говно. У нее в циклах вечно параша с функциями при переборке.
Dimox, ты на каком браузере работаешь с версткой?
Vivaldi, мой основной браузер.
Подскажите, при включении опции multiple у select они скрываются. Как продиагностировать, что не так?
Нужен живой пример с проблемой.
Пример — kurgan-balt.ru/shop/metalloprokat/chernyj-metall/chugun/krug/
Забыл. Для переключения в режим multiple надо в url добавить? multiple=Y
У вас отсутствуют стили для мультиселекта.
Спасибо большое. Так и думал, что что-то со стилями намудрили. Просто не я его делал и не знаю что и как реализовано.
Стили можно взять из версии на вашем сайте?
Конечно можно.
Я подменил стили, что были на стили из файла. Мультиселекты появились, но все равно выглядят неправильно. Они схлопнуты до высоты одного элемента. На demo не похоже
Первый пункт пустой, из-за этого.
Все получилось. Спасибо Вам большое за помощь.
Добрый день! Я в jquery не сильна, но очень нужно реализовать вот это:
Есть вот такая конструкция — jsfiddle.net/moireceptik/hp27xrdb/
Задача: При выборе категории — выделить все подкатегории только у выбранной категории
Сейчас я использовала ваш скрипт jsfiddle.net/Dimox/KgeSA/, но при выборе Категории № 1, отмечаются галочки абсолютно у всех категорий и подкатегорий. Что не правильно для моей задачи.
Предполагаю что тут нужно использовать (this), но как и куда его вставить — это выше моего понимания.
У меня получилось только так — https://jsfiddle.net/hp27xrdb/6/. Но переменная checked общая, поэтому во второй категории приходится кликать два раза. Я не знаю, как это правильно сделать.
Печально… Ну пока хоть так, может кто еще подскажет правильное решение? Ведь можно же как-то реализовать такое без двойного кликанья! Очень нужно!
А вам, спасибо за быстрый ответ))
Попробуйте задать вопрос в ru.stackoverflow.com.
Наверное не совсем к Вам, но Страница v-gorod.com/_v/
Браузеры — webkit для мобильных устройств
prntscr.com/jx0r5z → prntscr.com/jx0rdf — Не работает
Меняем ориентацию prntscr.com/jx0rjw — работает
Экспериментальным путем выяснил, что работоспособность зависит от положения относительно края браузера (устройства)
Скорее всего, причина в стилях вашего сайта.
Будут ли обновление плагина или автор забросил проект?
Возможно, что не буду обновлять, т.к. сам уже не пользуюсь им.
А почему если не секрет? Есть более лучшая альтернатива?
Оформляю на чистом CSS.
Dimox, а че так редко пишешь? Может хоть за ноду упорешься? Там новые прослушки есть… Скучно, почитать некого стало. Все мозги растеклись… Даже над беспантовыми сеошниками уже не поржать даже. Соскакивай с jQuery ;)
Как стилизовать стрелку у селекта.
Я использовал font-awesome
А как изменить при закрытии на стрелку в верх?
Спасибо, завтра попробую
Не работает выпадающий список, если зайти с Iphone, можно глянуть через dev tools на странице примеров
На реальном устройстве проверяйте, а не в эмуляции.
долго бились, но так и не можем понять почему не работают селекты в iOS
gruzovoy.ru/
https://gruzovoy.ru/catalog
не посмотрите, в чем может быть дело?
Я не знаю, как это выяснить. Могу только сказать, что причина либо в стилях, либо в скриптах вашего сайта.
Приветствую автора. Хороший плагин, но не хочет работать на iphone и в хроме при имитации iphone в панели разработчика. Есть ли способ это решить? Спасибо.
У меня есть только 4-й iphone с версией операционки7.1.2. На нем все работает. В имитации селект не будет работать, так как это не реальное устройство. На реальном открывается нативный выпадающий список.