jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

jQuery Form Styler – плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Комментарии (2 609)

  1. Здравствуйте! Спасибо за плагин и пояснения!
    Подскажите, пожалуйста, в Хроме 27… и 28… версии радио и чекбоксы не отображаются, т.е текст Radio и текст Checkbox виден, а кнопок нет. Куда мне копать?

  2. Спасибо за быстрый отзыв. Буду все еще раз внимательно перепроверять.

  3. Добрый день, отличный плагин, но столкнулся с небольшим вопросом:
    Есть селект, нужно отслеживать изменение состояния, если ли какая-то функция предусмотренная в плагине?
    Поскольку отслеживать только клик нельзя (поскольку можно ч/з таб и стрелочки выбрть вариант), а по интервалу проверять изменение текста мне кажется слишком загружено для страницы.
    Спасибо.

  4. Когда работаешь с селектом с планшета с хрома, например, не срабатывает “умное позиционирование” для открытия вверх. Можно ли определённому из селектов задать принудительное открытие вверх?

  5. Есть конфликт с validationEngine (https://github.com/posabsolute/jQuery-Validation-Engine)
    Даже если чекбокс отмечен, валидация выдает предупреждение.
    Есть варианты решения проблемы?

    • Не знаю. Я не могу заведомо обеспечить совместимость с различными плагинами.

    • Заглянул в код того плагина. Нашел там такую строку:

      if (form.find("input[name='" + name + "']:visible").size() == 1)

      Она говорит о том, что плагин проверяет (непонятно зачем), не скрыт ли элемент. В моем же плагине как раз все оригинальные элементы скрыты. Вот поэтому у вас и не работает.

      Т.е. мой плагин и validationEngine несовместимы.

  6. Плагин отличный уже попробовал и использовал его. Есть небольшое замечание в ИЕ 7 и 8 не скругляются углы, это можно поправить.

    И вопрос по ходу: Как вы тестируете версткру в разных браузерах, если например ИЕ7 даже портативный не открывается если на компьютере есть более поздняя версия браузера ИЕ.

    А вообще ее раз спасибо за отличную работу, добавил вас в закладки и скоро сделаю пост о вашем плагине. Ура!.

    • Пожалуйста.

      Тестирую следующим образом. Использую самую последнюю версию IE, в которой нажимаю F12 и использую это меню – http://s2.hostingkartinok.com/uploads/images/2013/07/31f69c86319073a8c01db1d2bffca962.png

      • Да тоже так делаю, но наверное я не правильно задал вопрос. Как вы тестируете если у клиента требования под разные браузеры ИЕ 7, ИЕ8 и ИЕ9. Когда нужно проверить как выводиться сайт в разных браузерах.

  7. на safari 6 под обычной макосью – если в стилизованном селекте перемещаться клавиатурными стрелками, то в левой часи экрана появляется стандартный селект, и не тригается каждый ивент нажатия

  8. Использую скрипт для выделения всех чекбоксов:

    $(function () {
    $(“#selall”).click(function () {
    if (!$(“#selall”).is(“:checked”)){
    $(“.checkbox”).removeAttr(“checked”);
    }
    else{
    $(“.checkbox”).attr(“checked”,”checked”);
    }

    });
    });

    Но при включении Вашего плагина, выделения не происходит. Пробовал добавлять trigger, но безрезультатно. Подскажите, пожалуйста, как можна исправить.

  9. и скрипт показа скрытого div в зависимости от радокнопки тоже не работает (при включении плагина):

    function Show(a) {
    obj=document.getElementById(“mydiv”);
    if (a) obj.style.display=”block”;
    else obj.style.display=”none”;
    }

  10. Баги:
    При вызове списка с клавиатуры http://d.pr/i/25BG , связанно с выносом настоящего селекта влево http://d.pr/i/yshK
    На iOS при выборе в селекте, не скрывается выпадающий список, и зум при фокусе влево экрана.

    Если уж делать стилизацию форм, то нужно повторить все возможные нативные контролы и полностью повторить поведение нативных элементов форм.

    • На iOS при выборе в селекте, не скрывается выпадающий список, и зум при фокусе влево экрана.

      Я уже не раз отвечал про это в комментариях, да и в статье про это написано – у меня нет возможности протестировать в данной операционной системе.

      Если уж делать стилизацию форм, то нужно повторить все возможные нативные контролы и полностью повторить поведение нативных элементов форм.

      Старался сделать, насколько это возможно.

  11. Нельзя задать ширину селекта. Величины в хтмл не работают, в цсс то же

    • Всё можно. Что-то не то делаете.

      • Мое мнение что в вашем показанном примере

        <select class="select1">...</select>
        <select class="select2">...</select>
        .select1 .jq-selectbox__select {width: 200px}
        .select2 .jq-selectbox__select {width: 250px}

        не верна логика указания ширины. Я тупой пользователь, я не хочу разбираться что и как устроено в вашем скрипте, я может быть даже ява скрипт не знаю что бы разобраться, я хочу на селект повесить свой класс, либо задать стилевой атрибут и в нем указать ширину.

        Этот вариант будет гораздо удобнее для рядовых пользователей. если я не прав поправь меня. Но мне пришлось отказаться от твоего плагина именно по этой причине. Лишний раз придется объяснять контент менеджеру что ширина селекта задается по твоему примеру, нежели по наитию .

  12. Возможно ли задать цвет для disabled пункта select-а?

  13. Добрый день.

    Предлагаю добавить установку класса выбранного элемента списка на элемент с классом jq-selectbox__select-text, сейчас нарисованные элементы списка наследуют классы повешенные на нативный элемент. Но не передают их при выборе. Если реализовать такой функционал, это позволит добавлять иконки не только элементам списка, но и выбранному элементу.

  14. v1.3.6 (18.05.2013)
    Исправлено: при открытии селекта другие не закрывались.

    Селекты действительно закрываются но остается класс opened.
    Вероятное решение:
    341 строка:

    $('div.jq-selectbox__dropdown:visible').hide();

    заменить на:

    $('div.jq-selectbox__dropdown:visible').hide().parents('.jqselect').removeClass('opened'); 
    • Аналогичная ситуация на 385 строке:

      dropdown.hide()

      Но баг не проявляется, в связи с багом чуть ниже, на 423 строке:

      if (!$(e.target).parents().hasClass('selectbox') && e.target.nodeName != 'OPTION') {

      Поиск родительских элементов идет по старому классу, сейчас же используется jq-selectbox, из-за этого бага выпадающий список закрывается даже если клик был произведен внутри него.

  15. Вопрос: Если функция которая отключает\включения formstyler для 1-го какого-нибудь объекта формы?

  16. Спасибо уже сам разобрался

  17. Подскажите, плз. Связанные селекты – после обновления (через ajax) данных в зависимом селекте как сделать чтобы обновились данные в соответствующем ему псевдоселекте???

  18. Глючный плагин, зря время на него потратил.

  19. Поскажите, возможно ли использовать фото вместе с названием для селектов ?

  20. Прежде всего: большое спасибо разработчику!
    Превосходный и удобный плагин! То, что давно искал. Код ровный, с комментариями.

    Подскажите пожалуйста, как реализовать в списке выбор нескольких элементов посредством простого клика, не прибегая к клавише “CTRL”.

    Спасибо!

Ваш комментарий