![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)
У меня глюк вылез с определением длины jq-selectbox__select похоже что он её берёт, основываясь на длине исходного селекта? или я чего-то недопонял? Кстати, за плагин спасибо!
Так и есть.
На iPad одиночные селекты несколько странно работают:
1. Кликаем на селект, список раскрывается, весь экран при этом немного затенятся
2. Кликаем на пункте внутри раскрытого списка — пункт не выбирается, но затенение всего экрана снимается
3. Кликаем на пункт — и только сейчас он выбирается
Автору надо либо где-то раздобыть эппловские устройства, либо увеличить размер/цвет букв в разделе «Недостатки». :)
Александр, поднимитесь чуть выше комментариев и прочитайте раздел «Недостатки». У меня тоже был баг на iPhone при использовании плагина для селектов. Пришлось отказаться и кастомизировать select.
Теперь вижу ;)
Но если удастся найти решение этой проблемы, то сообщу автору в чем именно она заключалась.
Буду признателен.
Да, как раз хочу на ибэе купить бэушный айфон для этих целей.
а как-то можно без влезаний в код плагина запретить вападание кастомного списка на ios? коли нет возможности поправить пока, хотя показывать дефолтный
Сам бы хотел знать ответ на этот вопрос. Скоро у меня будет айфон, тогда вплотную займусь данной проблемой.
Было бы здорово, если бы автор создал опцию плагина не только для текста на кнопке выбора файла, но и для поля, где отображается название файла (.jq-file__name). Чтобы там по умолчанию был бы текст, например: «Нет выбранного файла».
Хорошая идея, добавил в TODO.
Спасибо за оперативность!
Спасибо за плагин, очень помог.
Но есть небольшая проблема в Opera:
при клике по label на checkbox все работает, а когда клик происходит по самому input он вообще никак не реагирует?
Подскажите в чем может быть проблема?
Заранее благодарен.
Не знаю, у себя не наблюдаю такой проблемы. Проверял в Opera 12.15 и 17.
По макету у меня на input при клике стоит «галка» (я ставлю ее background)
Думал проблема в этом, но нет даже используя идентичный вашему css проблема не уходит
Приветствую.
Есть небольшая проблема в Opera:
при клике по label на checkbox все работает, а когда клик происходит по самому input он вообще никак не реагирует или вообще пропадает?
Проблему решил: просто поставил классу .jq-checkbox положительный z-index.
Может кому поможет.
Приветствую,
вопрос: 2 select, второй изменяется в зависимости от 1го, добавил триггер, все ок. можно выбирать все подгружается — хорошо, но если выбрать строку по умолчанию, для того чтобы второй селект был disable ничего не происходит :(сам второй select получает disable, а вот класс disable не добавляется, в чем может быть проблема?
надеюсь объяснил :)
Покажи лучше живой пример.
решил проблему) спасибо. там по невнимательности
есть ли возможность указать parent елемент для селекта, проблема в том что при использевание его в popup окне с высотой проблемы?
Элементарно:
Я наверно плохо обяснил) простите, я имел в виду, что когда список в селект длинный, и находитса он в самом низу popup, изза того что у popub {overflow: hidden;} список обрезаетса при откритие и не открываетса вверх. Можно ли гдето указать ему (селекту), родителя body например? Извените за беспокойство, борюсь за жизнь етого плагина на проекте)
На словах сложно понять.
Приветствую.
Вопрос: в ie9 option не соответствует по ширине select (меньше на ширину прокрутки) и если кликнуть по центру select выпадает дефолтные option?
Подскажите в чем может быть проблема?
https://www.dropbox.com/sh/mki6wk9mf2k7p9f/2RRjDUgeug
Заранее благодарен за ответ.
Что в IE9, что в других браузерах ширина одинаковая.
Необходимо указать цветовой фон для
.jq-selectbox__selectперед указанием градиента, например:background: #FFF;, иначе в IE9 и ниже псевдоселект получается прозрачным, а поскольку прямо под ним спрятан оригинальный селект, вот по нему и происходит клик.Кроме того, нужно убрать margin у селекта:
Иначе, если кликнуть в 4 пикселей справа от псевдоселекта, вылазит оригинальный.
Спасибо за помощь!
Все отлично, но в ie9 по-прежнему option не соответствует по ширине select (наблюдается у тех select, где есть прокрутка), в ie8 нормально.
Какой-то он у меня «загадочный».
Еще вопрос по скрипту.
При работе Ваш скрипт генерирует margin-top: 16 и 17px соответственно для оригинальных input radio и флажков.
Получается они находятся под псевдофлажками и radio c opacity=0, но при клике по ним отрабатывают checked.
То есть кликнул как на label, как на сам input, как под него сработает checked.
Если ставишь margin-top: 0, то естественно оригинальные элементы уходят под псевдо и все нормально работает.
Не очень удобно (или это у меня какой-то глюк)?
Вот мой скрин из IE9 — hkar.ru/l4i2
А вот с этим мне придется разобраться. Я сделал эти отступы, т.к. на моей демо-странице они только в этом случае оказываются под псевдоэлементами, а если оставить нулевой отступ, то вылазят вверх. Значит решение не универсальное.
Спасибо за замечательный Form Styler.
Я обнаружил, что если ставить значения width для селект кнтри HTML по средствам style, тогда jq-selectbox__select-text не правильно устанавливает ширину? Я прав или это недоработка? Как лучше с этим иметь дело, если есть нужна в HTML устанавливать свою ширину для каждого select? Есть возможность добавить поддержку чтения ширины из HTML?
Покажите пример. Ширина, которую укажите для select, должна быть такой же и для
.jq-selectbox__select.Вот пример на jsFiddle:
jsfiddle.net/k2Ar4/
HTML такой же как и у меня. Ваш код немного был изменен, но это не можнт влиять на результат. Я вынужден был измеить название селектора и название функции инит. Обрезается в jsFiddle так же как и у меня. В чем тут проблема?
Ширина абсолютно одинаковая, что у оригинального, что у псевдоселекта — hkar.ru/l6zg
На счет «обрезается» не понял.
Посмотрите на поля «Упорядочить», «Отображать» и «По». Все значения обрезаются, хотя ширина селекта на много больше и однозначно вместила бы данные слова. Когда открываешь Firebug, то станоится понятно что selectbox__select-text не правильно определяет ширину и обрезает текст который мог бы вместиться! Если поставить для selectbox__select-text width:160%, то тогда все вмещается, но это не совсем правильно и так же в некоторых ситуациях вызвалоб проблемы!
Как сделать, чтобы размер поля которое содержит selectbox__select-text ровнялся бы размеру select — selectbox__trigger-arrow.
Может быть вы это уже сделали? Но дело в том, что мне пришлось уменьшить ширину selectbox__trigger-arrow
Ваш пример смотреть невозможно, т.к. вы в хтмл-код вставили код, который генерируется плагином, поэтому селекты вообще не работают.
Dimox, да дело не в том что они работают или нет! Вопрос то не в этом?! Как я и написал выше текст внутри селекта, тот что selected? не показывается полностью. Посмотрите, там видно «Возрастани», «Актив» и «Вс» внутри. Но ширина селекта больше намного чем ширина внутреннего selectbox__select-text. Он не 100%
Чтобы я мог выявить причину, нужен пример с нормальным чистым кодом.
Подскажите, как реализовать следующее. Есть чексбоксы, которые отвечают за размер одеждыт. е. т. е. нажали на label вокруг него появился border
42, 43, 44
как сделать так чексбокс скрытый, а label работает,
Например, так:
Имеется ли функционал сброса выбранного значения мультиселекта при нажатии reset на форме?
Нет, не предусмотрено ни для одного элемента формы.
а жаль:(
Записал в TODO, попробую реализовать в будущем.
Dimox, можно ли как-нибудь отключить стилизацию выпадающего списка в select’ах? Чтобы он стилизовывался стандартными стредствами браузера?
Такой возможности нет и не будет.
ахахахаххахаха зачем подключать плагин, чтобы потом отключить стилизацию?
1. Чтобы решить проблему с overflow: hidden;
2. Чтобы стилизавалось только кнопка;
3. И чтобы хоть как-то решить проблему с Mac и iOS, придурок.
Вася, для стилизации только кнопки можно сделать background селекта картинкой, но это походу не для твоего развития такие штуки.
Есть куча других плагинов, которые стилизуют селект подобным образом. Да и на чистом CSS даже есть решения.
Выложил новую версию — доработаны чекбоксы и радиокнопки.
Здравствуйте.
Поставил новую версию.
В Opera версии12.16 при клике по label checkbox пропадает,
при клике по cледующему label для input radio он срабатывает только при двойном клике?
www.dropbox.com/sh/mki6wk9mf2k7p9f/2RRjDUgeug
Подскажите в чем может быть проблема?
Заранее благодарен.
Тут вообще какая-то мистика. Если удалить все три селекта после «Date of Birth», то проблема исчезает. Никакой логики в этом не нахожу.
И ни в одном другом браузере, кроме как в старой Опере, такой проблемы нет.
Селект очень легко подцепился в drupal 7, но никак не могу понять, можно ли менять дизайн скролла?
В моем плагине это не предусмотрено и не будет. Можно попробовать задействовать сторонний плагин, например, jscrollPane. Здесь рассказано, как его прицепить. Только у меня, почему-то, не получилось.
как-то неправильно стали вести себя радио инпуты, они все стают активными, но должна быть только одна активна в группе. У Вас на демо они также себя ведут
Это из-за отсутствия тега form.
спасибо, помогло
Приветствую.
У меня в форме по клику на «+» увеличивается количество input и select, но проблема в том, что клонированные select неактивные.
www.dropbox.com/s/ny07i0l003tpr92/Test.zip
Что нужно, чтобы активировать их?
Воспользоваться триггером, если да, то как?
Заранее благодарен за ответ.
Если добавляется новый селект, то необходимо запускать. styler (), если меняется существующий, то. trigger ('refresh').
При клонировании. clone (true); select уже имеет. styler (), если запускаю еще раз, то при клике по этому select выпадают option с предыдущего?
Если можно покажите на моем примере, если можно:
www.dropbox.com/s/ny07i0l003tpr92/Test.zip
Заранее благодарен.
У меня недостаточно знаний, чтобы ответить на этот вопрос.
День добрый. i.shotnes.com/a/30/zuy5yfbt.u0p_5270dbaee5859.png, если положение экрана не в самом верху, то высота дропбокса определена не правильно и селект обрезается. Как вылечить?
Видимо, никак. В коде все очень сложно устроено, поэтому подобные случаи могут возникать.
Приветствую.
При изменении размера окна браузера, триггеры select меняют свое местоположение (для примера Селект, имеющий пункт с длинным текстом).
При большом количестве select и большим количеством значений (option) рендер страницы тормозит со 100% процессора, при том что предыдущая ветка (старая) не тормозила.
Что имеете в виду под веткой?
dimox.name/styling-select-boxes-using-jquery-css/
С тех пор в коде многое поменялось.
ясное дело :)
Работает если сделать так
Вроде написано:
Но у меня в IE8 как-то совсем всё плохо. Корректно почти ничего не работает, кроме текстовых полей. На мультиселектах вообще браузер завис. Грусть-печалька.
Добрый день!
Помогите, пожалуйста!
У меня следующая проблема
Есть 2 селекта, использую ваш плагин.
Выбирая в списке select первого какой-либо элемент, должен выходить в зависимости от выбора определенный перечень элементов на втором селекте, который тоже отображен на странице.
Без плагина — всё работает
С плагином — не работает.
Использую старую версию плагина
dimox.name/styling-select-boxes-using-jquery-css/
У старой версии ограниченные возможности, не нужно его использовать.