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. Было бы замечательно сделать опцию для select’a, чтобы он работал как autocomplete на jquery. Только без всяких фичей типа подгрузка аяксом и тд. Просто из статических option’ов.

    • +100. Мне тоже не хватает функции autocomplete. Но аякс все же нужен, без него будет сырой автокомплит.

      Набор красивый и приятный. Автор, спасибо, очень классная работа!

  2. А как с помощью jQuery изменить состояние checkbox-а?

  3. Дмитрий, а как на счет стилизации скролл-бара у textarea? Так и не нашел достойного решения в Интернете.

  4. При использовании jquery версии 1.8.2 присутствует баг в селектах. После того как выбираешь селект, удаляется класс родительского контейнера, соответственно стили слетают

  5. Здравствуйте!
    Последний раз пользовался старой версией скрипта (1.3.5, кажется). Вижу, что поменялась логика указания ширины селекта. Видимо, этот пункт изменений:

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

    .

    Я пробовал разные варианты задания ширины в CSS. Частично работает только задание ширины для нестилизованного селекта, но ширина .jq-selectbox__select при этом не меняется, из-за чего стрелочка вылазит за пределы стилизованного селекта.

    Корректно работает только задание ширины через JS, но это неудобно (нужно от общей требуемой ширины селекта отнять паддинги .jq-selectbox__select и толщину границ, если они присутствуют).

    Можете указать правильные шаги для задания жесткой ширины селекта?

    • Ширину нужно задавать для тега select. В пункте изменений ведь так и написано:

      стандартным способом, как если бы плагин был отключен

      Т.е. либо так:

      <select style="width: 250px">

      либо так:

      select { width: 250px }
      • Да, моя ошибка. Указывал ширину не оригинальному селекту, а стилизованному.

        Может, стоит это указать и в описании плагина? А то в истори изменений есть, а в общем описании только

        Автоматически подстраивает ширину, если она не указана

        Спасибо за плагин!

        • Может, стоит это указать и в описании плагина?

          Да, тоже об этом подумал. Укажу.

          Спасибо за плагин!

          Пожалуйста!

          • Стоит еще указать красным и большими буквами что указав ширину в процентах у нестилизованного селекта он берет размер непонятно от какого родителя и расползается на весь экран.

            Мне кажется если ширина указана в процентах то и в элемент стайл стоит засовывать ее в процентах а не в пикселях.

            • Забираю слова обратно, понятно от какого родителя

              el.after(selectbox).css({position: ‘absolute’, left: -9999});

              в коде до этой строки стоит в переменную засунуть значение ширины селекта.

              var selectWidth = el.css(‘width’);

              попадет естественно в пикселях, так как в ряде браузеров перестала корректно работать функция getComputedStyle.

              Идей по поводу процентов пока нет

  6. Выложил новую версию плагина. Исправил один баг.

  7. Создаю select, по умолчанию ему присваивает Ваш плагин значение:

    element.style {
    display: inline-block;
    position: relative;
    z-index: 100;
    }

    Соответственно, если я хочу чтобы select’ы , блочными мне нужно в css писать:

    .region__item__select {
    display: block !important;
    }

    Тоже самое с классом jq-selectbox__select, ему по умолчанию присваивается:
    element.style {
    width: 70px;
    }

    Не пойму зачем, может я не до разобрался? Т.е если я меняю ширину в css, мне приходится также !important писать.

  8. Во первых, спасибо за замечательный плагин!
    Сегодня заметил глюк. В MacOS при стилизации input file кнопка обзор некорректно работает. Срабатывает только если кликнуть в то место где нет текста “Обзор…”. Правда это пробовал на версии 1.3.5. Скажите, в новой это исправлено ? А то нет возможности сейчас проверить.

  9. Воспользовался Вашим плагином, интересная вещь)

    Потребовалась более точная настройка type=”file” , кнопку следовало перенести на лево, пришлось править js 146 строка float: right; ну и добавить “Файл не выбран!”

    было бы прикольно если предусмотрите такие настройки в плагине, так как мне легко его изменить и модифицировать, но вот пользователям не знакомым с js будет тяжелее.

    А за плагин большое спасибо, аккуратный. Попозже добавлю к нему jScrollPane (для тестов)

  10. Столкнулся с вашим плагином в вёрстке (верстак заюзал).
    Довольно удобно и минимум ненужных атрибутов, правда хорошо что нашёл доки по нему, а то аяксом час пытался манипулировать значениями селектов, вроде пашет – а не видно)))

    Но всё же спасибо за плагин, очень удобный.

  11. Dimox, спасибо за плагин.

    Почему то не переключались состояния скрытых чекбоксов, которые собственно и должны отсылаться формой. Т.е. у div-a с классом “jq-checkbox” добавляется класс “checked” а у скрытого изначального чекбокса атрибут “checked” не добавляется. Чтобы работало нужно подправить немного анонимную функцию на событии click для checkbox-a. (checkbox.click). Проверь плиз. (версия плагина v1.3.8.2 за 6 сентября)

  12. Dimox, благодарю за плагин!
    Скажите пожалуйста, будет ли поддержка readonly в input и не только, возникла проектная необходимость, но как я понимаю, этого аттрибута нет.

  13. Ширина дропдауна у селекта в любом случае подбирается автоматически? Хочу ограничить ее. Пробовал ставить width для .jq-selectbox__dropdown, но свойство переопределяется скриптом.

    Что можно сделать, кроме $(‘#select .jq-selectbox__dropdown).css(‘width’, ‘xxx’) ?

    • Что-то не то значит делаете. В скрипте для этого селектора ширина не задается, что укажете в CSS, то и будет. Если вы подключили файл jquery.formstyler.css, то ширина прописана в нем.

      • Пока не понятно. Первоначально я удалял
        .jq-selectbox__dropdown {
        width: 100%;
        }
        , чтобы ширина подбиралась автоматически. Но теперь попались элементы с очень длинным текстом (913px). Именно эта ширина и выставляется для дропдауна, переопределяя значение в css.

        Я думаю, может быть проблема в том, что в моем случае селектор наполняется динамически
        $(‘#select’).append(” + options[id] + ”).trigger(‘refresh’);
        и уже не обращает внимания на css?

        В css работает только если использовать с !important.

  14. Есть у вашего плагина Api? очень бы не помешало.

  15. Как сделать чекбокс, который отключал и включал бы все чекбоксы, не переключал а именно включал и выключал? Вот пример на скрине http://f3.s.qip.ru/I0Rre5Xw.png

  16. В описании написано, что передаются data-* атрибуты… Как это сделать для селекта? Мне нужно чтобы у каждого options был data-url в котором я передаю ссылку на картинку. Подскажите пожалуйста.

  17. Добавил себе класс для селекта если он “умный” и открылся вверх вместо того чтобы открыться вниз. Других способов определить как открыт селект не нашел.

  18. Не поняла , как выбрать несколько пунктов в мультиселекте?
    по-моему должны быть галочки… (как фильтры на lamoda.ru например)

    • Используйте Ctrl или Shift.

      как фильтры на lamoda.ru например

      Галочки – это чекбоксы, а не мультиселекты. Почитайте информацию о том, как устроены веб-формы, тогда не будет таких вопросов.

  19. При использовании плагина есть проблема с валидацией формы.. как можно решить эту проблему?

  20. Здравствуйте.
    Можно ли сделать так, чтобы в новые checkbox’ы, которые создаются плагином, передавались события из оригинального input’a?
    События следующие: click(уже передается), change, keydown, focus, blur, refresh.

    Это нужно для “умного фильтра” CMS 1С-Битрикс, а именно, когда пользователь, например, выбирает определенных производителей техники, то слева от фильтра появляется блок “Выбрано: 5 Показать”, как на Яндекс маркете.

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