jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Если ширина блока переопределяется где-то через .jq-selectbox.width-xxx и при этом там используется !important
(… ну мало-ли сколько там будет правил, перекрывающих друг-друга)
то при длинном тексте width: 100% недостаточно – текст вылазит за пределы select’a
Не используйте
!important
(он там не нужен), тогда ничего не будет вылазить.Шикарный плагин! Спасибо!
Добрый день.
Спасибо за скрипт.
Не работает демо тут:
http://dimox.github.io/jQueryFormStyler/demo/
У меня работает, не вижу никаких проблем.
Спасибо за такой замечательный плагин. Установил, настроил всё супер, но заметил один момент, что если я в select-е первый option делаю disabled то он не отображается (вернее отображается но уже когда селект раскрывается). Отображается сразу следующий и так далее. Первый просто игнорируется. Может что не так делаю. Dimox подскажи плиз)
Это стандартное поведение селекта, в этом нет никакой ошибки. Неактивный пункт же нельзя выбрать, поэтому он не попадает в свернутый селект, если идет первым.
Да точно, я это как то упустил, просто верстаю макет где дизайнер предполагает, что неактивный пункт идёт первым и к тому же виден типа: –Выбрать– Плюс ко всему он светло серого цвета, а все которые активны чёрного. Есть ли возможность отдельно стилизовать option?
Картинка дизайна селектов
http://ctb-prio.ru/select.jpg
Да, можно. Пример:
Отлично! Спасибо!!!
Есть вопрос, можно ли будет , когда то добавить в селект placeholder, ну например что он был виден, но когда открываешь, его в списке небыло, если ничего не выбрал и закрыл, он остался, но если чтото выбрал он конечно пропал. Чтото типа дефолтного текста в спане текст, например, если data-title у стандартного селекта указан из него брать етот текст, если нет то как раньше.
Не хочется усложнять этим скрипт.
Как правильно сделать width селекту? Или его размер ставится только в зависимости от самого широкого элемента?
Вот так:
Если она не указана, то определяется автоматически, исходя из самого широкого пункта.
Спасибо, получилось. А одному элементу можно задать размер?
И не понятно ошибка это или я не так делаю. Если сделать селект меньшего размера, то список не открывается :( . Т.е. .jq-selectbox { width: 180px; } работает нормально, но если поставить 80px, то список не открывается
Не знаю, в чем причина. У меня открывается при любой ширине.
Можно.
Размер поменялся, спасибо, но маленький не хочет работать :( заметил что при наведении мышкой на треугольник, курсор не меняется. Не могли бы проверить у себя? Вот мой селект
мужской
женский
div style=”position:absolute; margin-left: 70px; margin-top: 69px; width: 80px;”>
select name=”cb_paul_driver_1″ class=”myselect”>
option value=”0″>мужской
option value=”1″>женский
/select>
/div>
первые “<" убрал, что бы, было видно
Странно, в одном месте работает, в другом нет. Буду разбираться. Извините за беспокойство. Спасибо за подсказку по размеру в стилях
Такая вот штука. Понимаю что возможно стандартный селект и имеет такое поведение но у нас же не стандартный.
Этот селект работать не будет
Нужно чтобы option содержало хоть какой то текст. те помогает
Добавьте какой-нибудь текст и примените
text-indent: -9999px;
.такое пробовал. Если мне не изменяет память то этот способ не изменяет ширину элемента. то есть даже если текста не видно место под него резервируется. в моем случае я сделал текст прозрачным а иконку подвинул при помощи отрицательного маргина. https://db.tt/9a5cVDiK
Привет. Можешь подсказать, есть ли какой-то способ стилизовать скролбар в выпадающем списке селекта? вот как должно быть http://prntscr.com/365nmc
заранее спасибо за ответ!
Тут есть пример.
Спасибо.. помогло!
Dimox, сделай пожалуйста поиск по камментариям, у меня есть одна проблема может она уже тут была описана, но я не могу найти. Позже сам решил, но мало ли, зачем люди будут дублировать вопросы.
Не представляю, как его можно сделать. Единственный вариант, который вижу – искать на сайте через гугл.
Пробовал, но вроде как не подтянуло, хотя может я искал то что и не обсуждалось в комментах. У меня проблема решилась когда просмотрел Вашу демку.
Отличный плагин, часто пользуюсь, спасибо!
Недавно столкнулся с такой багой – на айпадах/айфонах при выборе селекта, плагин не срабатывает, его дропдаун не открывается и, видимо, не добавляются нужные классы opened и changed, т.к. после выбора, селект не стилизуется в соответствии с ними. Вместо дропдауна вылезает нативный айпадовский селект.
Это не баг, а специально так сделано.
Хм, странно. А можно это как-нибудь обойти, чтобы была возможность после выбора опции стилизовать селект? Может, в какой-нибудь из старых версий плагина была такая возможность?
У меня он остается стилизованным после выбора.
Не, я имею в виду не то, что сам селект не стилизованный, а то, что дополнительно его стилизовать. Например, я хочу, чтобы при выборе опции менялся цвет фона селекта. Этого не происходит на айпаде, т.к., видимо, не применяется класс changed, через который можно было бы изменить цвет.
Да, как оказалось, там это не срабатывает из-за того, что changed добавляется только при клике на стилизованном выпадающем списке, который в iOS спрятан. Упустил этот момент, исправлю.
Отлично, огромное спасибо!
Странное поведение плагина.
При клике, на элемент проверяю есть ли дочерние (отдельный объект взаимосвязей), если есть переключаю их тоже.
Проблема в том что 2 раза .trigger(‘refresh’) срабатывает, а потом перестает, хотя по коду атрибут checked проставляется и убирается, а вот у div выше перестает появляться класс “checked”.
В чем может быть проблема?
Вот более пример чистый:
Мне сложно определить причину. Возможно, стоит заменить
.attr('checked', true)
на.prop('checked', true)
, а.removeAttr('checked')
на.prop('checked', false)
.Да, я был прав, мое решение работает.
Ага, спасибо, сам только до этого дошел… Неправильно атрибутом проставлять чекбокс.
Добрый день. Подскажите, при динамическом создании элементов не срабатывает обработчик клика.
http://screenshot.su/show.php?img=c38ea6ef616b934519032f0a9c65c496.jpg
проблема с селектом 2. Селект работает до того, как покликать на чекбоксы 1. – после этого селект 2 перестает работать
Триггер рефреш отрабатывает, но без толку
посмотреть можно – http://www.e1точкаtbox24.ru/ – 71 строка кода в фаербаге
Попробуйте к проблемному селекту применить заново styler() вместо рефреша в момент, когда он появляется.
к файлу, в котором определена функция, которая выводит новые элементы у меня доступа нет. Как то можно ее переопределить? или вызвать рефреш сразу после ее завершения?
функция SFCloneSegment() файл scripts.js – 622 строка
Не знаю, мне в этом коде не разобраться.
Здравствуйте! Подскажите, что я не так делаю?
В общем после загрузки файла, мне нужно обновить select, добавить туда option с именем файла который был только, что загружен. Консоль показывает, что option добавлен, а вот сам селект не обновляться.
По идее, все правильно сделано. Не знаю, в чем дело.
Может из за того, что это происходит всё в модальном окне?)))
Это не имеет значения.
Ну понятно. И что делать то? Кстати когда создаёшь селект динамически он должен иметь внешний вида плагина или нет? У меня он создаётся обычно, без стилизации.
Должен стилизоваться. Значит что-то неправильно делаете.
Хороший плагин, но если уж взялись поддерживать формы вы хоть плейсхолдер добавьте в 9-8 ие нечего сложного в этом нет спасибо.
Доброго дня. Спасибо за скрипт. Всё очень удобно и красиво. Помогите советом пожалуйста. Имею два разных выпадающих списка. Хотел бы их оформить по разному. Как это можно реализовать?
Подскажите как прикрутить разные стили CSS.
Ответ здесь.
Доступна новая версия плагина – 1.5.
Здравствуйте!
Решила попробовать ваш чудесный плагин и вроде всё отлично, но почему-то стили для input’ов не применяются( Что я делаю не так?
Вызываю так, как написано в статье выше:
Сложно сказать, не видя вашего кода.
например, тут
на этом сайте такая мешанина из скриптов, что я теряюсь -___-
Невнимательно читали описание плагина. С текстовыми полями он ничего не делает. Надо самостоятельно добавить к ним класс
.styler
.Вот чёрт :) Прошу прощения) Спасибо вам за чудесный плагин)
Здравствуйте. Дайте пожалуста ссылочку, где про это почитать…
Написано в статье в конце блока “CSS-селекторы, используемые для оформления”.
Добрый день.. на ipad вообще не открываются селекты, в чем может быть причина?
Специально так сделано, т.к. там открывется свой нативный список.
Здравствуйте Дмитрий.
Спасибо за ваш труд.
Возникла проблемка.
Верстаю калькулятор(http://tk.bricrb.by/calc.html), вверху где Пункт отправки и Пункт назначения селект нормально отображается (при раскрытии), но когда идем дальше (ставим галочку Негабаритный груз, Нажимаем ссылку АВТОЭКСПЕДИРОВАНИЕ, ставим галочку От двери) селект при открытии некоректно отображается, а имеенто автоматом проставляет маленькую ширину эллементу
С чем это может быть связанно?
P.S. в jq я пока нуб
Не наблюдаю такого. Ширина этого селекта 250 пикселей. Похоже, что вы уже разобрались.
да, спасибо, разобрался)
Мне кажется уже пора делать поиск по комментам или отдельный форум для вопросов и обсуждений. А вопрос у меня следующий: как задисейблить кнопку? Сделал как в примере
пробовал и тригер и рефреш и чет не работает. У кнопки то атрибут появился и она задисейблилась, но вот сама кнопка по прежнему нажимается. Подскажите как это сделать. Посмотреть пример можно здесь http://stryukov.net/info.php
Уберите с кнопки класc
.styler
и тогда увидите, что кнопка становится неактивной. Просто вjquery.formstyler.css
отсутствуют стили для неактивной кнопки.А триггер рефреш здесь бесполезно использовать, т.к. плагин не трогает такие кнопки. Читайте внимательно, какие элементы стилизует плагин.
Спасибо за ответ!
Возможно стоит задумать об остальных элементах формы?