jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
зачем элементу с классом «.jq-selectbox__select», присваивается правило
оно ни на что не влияет, зато ломает когда нужен тянущийся элемент hkar.ru/fwDz (меняем внешний размер, сам select тянется, внутренний блок «.jq-selectbox__select», не тянется, у него кончается фон и селект разбивается на две части. Решил проблему написав
Видимо, для чего-то мне это было нужно. Сейчас да, никакого толку от этого свойства. В следующем обновлении удалю. Спасибо, что сообщили.
А если мне необходимо изменить размер select`а в пикселях?
Как это сделать? Если убираю в css width: 185px — селект ведет себя «неадекватно» — при наведении мыши меняются размеры.
Поменяйте 185 на нужную ширину.
Это логично :)
Но когда 2−3-4 селекта на страницы и все нужны разных размеров, то это не выход.
Принудительно задать размер в пикселях для каждого селекта не получается (
Читайте внимательно возможности плагина. Любому селекту можно указать свой класс или id.
Если бы я понял как это делать — не спрашивал бы.
В любом случае спасибо за ответ.
И так далее.
Я так сделал с самого начала.
Только вот так
не работает.
Я это имел в виду в первом своем вопросе.
Ладно. Буду бегать в файл css для установки ширины селектов)
Спасибо за плагин!
для я думаю стоит ввести ограничение на ввод только цифр.
Здравствуйте. Вопрос такой: как скрывать уже открытые select’ы при открытии другого?
Смотрите комментарий № 451.
Спасибо, но уже сам разобрался:
343-ая строка скрипта: (добавил)
.focus (function () {
$('.jq-selectbox').removeClass ('focused opened').find ('.jq-selectbox__dropdown').hide ();
selectbox. addClass ('focused');
})
Здравствуйте.
Подскажите пожалуйста, если используется этот код
как сделать что бы обновляемый чекбокс сначала показал картинку loading?
Никак. В этом нет смысла, т.к. обновление происходит мгновенно.
Извиняюсь, не чекбокс, а поле select
как сделать что бы обновляемое поле select сначала показал картинку loading?
Ответ тот же самый.
Может я тогда не так описал проблему …т. е. для пользователя не понятно что поле обновилось и там есть Города.
Попробую ещё раз …
Есть 2 поля: Страна и Город, при выборе страны — обновляется поле Город.
Сейчас с обновлением всё в порядке, но нет никакой «метки"(loading), что поле Город обновилось,
Хотелось бы если не картинки, то может изменение цвета поля и что-то такое.
Так же сейчас столкнулся с проблемой если подключать плагин jQuery-Validation-Engine , немного изменил Ваш плагин и стало работать, но проблема: если поле select обычное, то работает отлично, а вот если динамическое (как Старана → Город), тогда получается так: если не выбрать поле Страна и нажать «Готово», то появится подсказка, что поле Страна обязательное, тогда после выбора Страны, появляются 2 поля Город.
Думаю что скорее всего проблема не в вашем плагине, а в плагине валидации, но может что-то подскажите?
Может кому пригодится, решил проблему так:
Код
Заменил на
Подскажите, как сделать, что бы при нажатии на клавиши «вверх» или «вниз» не показывался стандартный select?
Не должно такого быть. В плагине что-то меняли? Какой браузер? Какая ОС?
такое даже на Вашем примере. OS X 10.8.3 safari
в google chrome также, а в opera нормально
У меня нет возможности протестировать на OS X. Пользуюсь Виндой, на ней все в порядке.
Привет! Восхитительный плагин.
Непонятны некоторые моменты:
1. Некоторые атрибуты, например title, перестают действовать после навешивания на select.
2. Например чтобы размеры самого select’a и выпадающего его списка совпадали, обязательно нужно переопределить 2 класса: .my-class .jq-selectbox__select и .my-class .jq-selectbox__dropdown?
Спасибо!
Логично, потому что в плагине это не предусмотрено. Могу реализовать в следующей версии. Какие еще атрибуты, кроме title, нужно перенести?
Да. Чтобы указывать только в одном месте (для
.jq-selectbox__select
), нужно у.jq-selectbox__dropdown
ширину поменять на 100%, аborder
,border-radius
иbackground
перенести в.jq-selectbox ul
. Пожалуй, внесу это правку в следующей версии, так будет лучше.Наверно все, которые присутствуют в оригинальном селекте. Просто перенести эти атрибуты в span-обёртку с классом jq-selectbox. Задачи разные бывают, могут попадаться и свои собственные атрибуты.
Спасибо, будем ждать =)
Здравствуйте.
Понравился Ваш плагин, однако при работе с file массив $_FILES на выходе пуст.
Так же .name имеет прозрачный бэк изначально и может использоваться только на белом фоне)
Я поменял для себя, но в вашем примере если сделать .menu, .section {background:none} прозрачность так же имеется в мультиселектах.
Извиняюсь. Выше писал про массив. С ним всё хорошо :)
Так же было обнаружено при замене .min на полный файл: «Обзор…» написан кракозябрами, ибо полный файл в кодировке utf8 а упрощенный в ansi.
Поле файл по дефолту обрабатывается так
http://www.nicewe.ru/file.png
Поле заключено в div который имеет min-height:30px.
FF 21.0
Добрый день,
проблемка возникла что нужно сдделать что бы работало плагин работал с FancyBox, когда открываю модальное окно плагин не срабатывает (
Добрый вечер. Помогите повесить
на span. jq-radio, очень нужно, уже все перепробовал. При onclick () — отрабатывается, но с ошибками и с тормозами. А всего-то нужно сделать
Делается вот так:
проблема в том что я не могу повесить change на скрытый input, придется переписывать скрипт доставки товаров…
Не понимаю, почему это может являться проблемой. По-другому не знаю, как сделать.
Все-равно спасибо что откликнулись!
Было бы классно, если бы у такого замечательного плагина была еще страница build’а, где можно было бы выполнить сборку, например функционал только для стилизации
Использую Ваш плагин во многих больших проектах, спасибо за проделанную работу!
я так понял текст при выбранной радио кнопки надо менять средствами скрипта? в css никак не предусмотрено?
Не понял, про какой текст речь.
Всем привет,
подскажите пожалуйста
код:
при onClick не срабатывает (
Поменяйте onClick на onChange.
Dimox спс, а с onClick ни как, нельзя?
В данном случае никак.
На iPhone 4S в Safari отображает два селекта :(
Если нужен Safari под Windows support.apple.com/kb/dl1531
У меня нет iPhone, чтобы протестировать.
Подскажите, почему-то не присваивается класс «styler» для input типа text, password. Класс не присваивается и css код соответственно не цепляется.
А для input checkbox и radio все нормально работает.
Потому что его нужно самому добавить.