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 611)

  1. Михаил
    6 лет назад

    Привет! Плагин хороший, судя по возможностям и быстроте настройки. Вопрос касается Range объекта. Плагин не обновляет стиль данного типа инпут поля?

    • В статье четко указано, для каких элементов фон предназначен плагин.

    • Плагин хорош, только бы api для динамического изменения элементов. Например если нужно выбрать чекбокс то нужно в нем установить атрибут checked = “checked” если это радио кнопка то в нужно вызвать событие .click(). Это я к примеру. Апо в коде приходится проверять радио кнопка это или нет, что делает код менее читабельным и затрачивает + 2-3 минуты времени разработчика.

  2. Сергец
    6 лет назад

    Здравствуйте! Есть ли у плагина возможность в выпадающем селекте выбирать активный option с помощью jquery?

  3. Сергей
    6 лет назад

    Спасибо. Я новичок по этому сразу не нашел решение. Использовал для селекта $(“option”).attr(“selected”, “selected”), но на стилизованный плагин это не влияло. Тогда в демке заметил .trigger(‘refresh’). $(“option”).attr(“selected”, “selected”).trigger(‘refresh’). Все заработало. Спасибо за плагин!

  4. А как решать проблему что на Iphone селект не разворачивается ????

  5. Здравствуйте
    Спасибо, за плагин и его поддержку.
    Бывает довольно часто, что нужно обозначить родительскому блоку класс, что его ребенок чекбок к примеру имеет статус «.styler.checked». Есть ли возможность указать в настройках плагина эту опцию? Если нет, хотел бы вас попросить добавить в следующем обновлении плагина.
    Заранее спасибо.

    • Нет такой возможности, да и не нужна она в плагине. Для этого достаточно написать отдельный код на проверку изменения состояния чекбокса.

  6. Добрый день!
    Использовал Радиокнопки, но срабатывание происходить только на выбор.
    Т.е., например, выбираю пункт 1….появляется точка, потом выбираю пункт 2, но переключения не происходит – остаются выбранными и пункт1, и пункт2.
    Подскажите что не так? Опыта у меня мало или это баг в отработке плагина?
    Заранее благодарен.

  7. при form.reset() сбрасываются состояния элементов, но не их внешний вид (дивы не снимают класс checked). Вручную конечно убирается (снимать в js классы), но было бы неплохо, если бы эта функция была реализованна. Также эмуляция клика через js по скрытому резет-баттону не помогает.

  8. Каким образом получить значение из селекта? val() не срабатывает. Потому как плагин не устанавливает selected для option. Какой-то аццкий косяк:((( Или я торможу?

    • У меня срабатывает.

      $('select').change(function() {
      	alert( $(this).val() );
      });
      • Да, пардон, некорретно с селектом работал, через класс. Так val() не срабатывает.
        Другой вопрос: разукрашиваем чекбокс, у него задано событие onclick=”some_function(this)”. Как это событие распространить на разукрашенный чекбокс. Увы в колбеке onFormStyled нет никаких входящих параметров, как еще ковырять непонятно, хочу универсальный вариант. От onclick отказаться не могу – используется готовый типовой компонент CMS, где так предопределено…

  9. Подскажите как “сплющить” по вертикали свернутый селект? не нахожу где высоту можно указать.

  10. А можно ли как-нибудь завязать ваш плагин и кастомный скролл? Хочу сделать чтобы в дропдауне селекта был красивый скролл, не получается( Не подскажете как быть? Спасибо!

  11. Перестает работать динамическое изменение цены. Dimox, помогите пожалуйста

  12. Добрый день, подскажите пожалуйста- как сделать чтобы определенные radiobutton не стилизовались? я как-то спрашивал, но найти ответ не вышло :(

  13. Как убрать открытие select вверх? почему-то находясь вверху сайта селект выводит опшены не в низ а вверх

  14. Всем доброго времени суток! Подскажите как ограничить высоту выпадающего select меню, применил к родителю , не сработало.

  15. как отключить на андроиде?

  16. Как сделать выборку всех чекбоксов одним главным чекбоксом в таблице ну и обратную функцию если главный снят чекбокс то и все в таблице сняты.

  17. Подскажите, как сделать, чтобы при клике по чекбоксу, для label также добавлялся класс “checked”? Это предусмотрено в плагине?

    • В плагине это не предусмотрено. Можно сделать следующим образом:

      <label><input type="checkbox" /> Чекбокс</label>
      
      $('input:checkbox').change(function() {
      	if ($(this).is(':checked')) {
      		$(this).closest('label').addClass('checked');
      	} else {
      		$(this).closest('label').removeClass('checked');
      	}
      });
      
      • Сделал по подобию для radio кнопок с использованием label

        $('input:radio').change(function() {
        	var n = $(this).attr('name');
        	var nm = $('input:radio[name='+n+']').not(':checked').closest('label.checked');
        
        	if( nm )
        		nm.removeClass('checked');
        
        	$(this).closest('label').addClass('checked');
        });
  18. Спасибо за отличный плагин, я начинающий веб-разработчик (самоучка) возник такой вопрос, можно ли твой плагин как-то интегрировать с плагинами для wp???
    конкретный пример – есть плагин wpcc (конструктор калькулятора) – у его полей формы не корссбраузерное отображение…. я просто даже примерно не понимаю как бы твой плагин скрестить с wpcc

  19. отличный плагин.
    не хочет выпадать селект на ipad и даже на демо сайте.
    есть решение?

  20. Доброго времени суток! Хотел уточнить такой вопрос , можно ли после стилизации вашим плагином , сделать редактируемый select , что то на подобии ?
    Заранее спасибо!

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