jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
зачем элементу с классом “.jq-selectbox__select”, присваивается правило
оно ни на что не влияет, зато ломает когда нужен тянущийся элемент http://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 http://support.apple.com/kb/dl1531
У меня нет iPhone, чтобы протестировать.
Подскажите, почему-то не присваивается класс “styler” для input типа text, password. Класс не присваивается и css код соответственно не цепляется.
А для input checkbox и radio все нормально работает.
Потому что его нужно самому добавить.