Главная JavaScript

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

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

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

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

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

  3. Спасибо. Я новичок по этому сразу не нашел решение. Использовал для селекта $(“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 , что то на подобии ?
    Заранее спасибо!

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