Главная 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. Плагин шикарный, но для меня есть один недостаток. Почему-то у меня всегда стоит задача, чтобы псевдоселект принимал ширину селекта, на основе, которого он построен.
    Для этого приходится дописывать костыли: перед function selectbox ()

    el.css('width', el.width()+'px');

    — из-за абсолютного позиционирования ширина может отличаться от первоначальной (когда селект прячется), а в функции doSelect () делаю вот так:

    var elWidth = (el.width() - 2) + 'px';
    // ...
    var dropdown =
      $('<div class="jq-selectbox__dropdown" style="position: absolute; overflow: auto; overflow-x: hidden; width: '+elWidth+'">'+
      '<ul style="list-style: none">' + list + '</ul>'+
      '</div>');

    ну и самой обёртке селектбокса тоже дописываю ширину. Ну это так, на скорую руку.

    Не задумывались о том, чтобы реализовать такой функционал из коробки?

  2. Здравствуйте, нашел баг в плагине при работе из другим режимом направления текста

    <body dir="rtl">

    . В нем при клике на поле формы скрывается все содержимое и отображается стандартное поле, которое выехало (поскольку ему добавляется стиль position: absolute; left: -9999px;).
    Для решения достаточно просто поменять left на right. Локально проблему решил, но было бы неплохо если бы ваш плагин, учитывал это условие, и скрывал бы автоматически в правильном направлении.

  3. Здравствуйте. Можно узнать, Почему вы используете внутри span теги div? Если нужен инлайновый елемент то лучше наверно использовать див и применить к нему свойство «display». Запрещено внутри элементов «inline» размещать элементы «block».

  4. Спасибо за отличный плагин.
    Но, не ловит в некоторых случаях опции селекта, что делать, куда копать. Могу скинуть принтскрин по надобности.

  5. Взял другой плагин, спасибо за внимание.

  6. Както странно, все селекты есть, а вот варианта когда задан size, но не задан multiple — нету!
    т. е. когда обычный список из n строк, но без мультиселекта.

  7. Подскажите, как добавить разные фоновые картинки option в select, нужно сделать что-то вроде картинка русский флаг — текст Россия, картинка амер. флаг — текст США и т. д.
    Всего планируется использовать 3 option в select.

  8. Подскажите, пожалуйста, можно ли как-то в option подставить input? Чтобы помимо предложенных вариантов, пользователь мой ввести и свой вариант.

  9. Здравствуйте! Понравился ваш плагин. Только не понял, почему сами inputы не меняют состояния checked. Пришлось дописать в код плагина установку и снятие этих атрибутов при клике на объект el. Может что-то проглядел, но у вас в демо та же проблема.

    	checkbox.click(function() {
    							if (!checkbox.is('.disabled')) {
    								if (el.is(':checked')) {
    									el.prop('checked', false);
    									el.removeAttr('checked');
    									checkbox.removeClass('checked');
    								} else {
    									el.attr('checked','checked');
    									el.prop('checked', true);
    									checkbox.addClass('checked');
    								}
    								el.change();
    								return false;
    							} else {
    								return false;
    							}
    						});
    	
    
  10. плагин хороший, очень выручил!
    подскажите, как получить value конкретного option при клике по нем?
    (вернее при клике по его псевдоэлементу li)

  11. У меня проблема на DLE 9.6
    из-за одной строчки кода … пропадает визуальный редактор контента, что делать?
    на изображении все визуально видно!

    s4.uploads.ru/djtRX.png
    http://s5.uploads.ru/0CyKs.png
    s5.uploads.ru/U5qLJ.png
    http://s5.uploads.ru/HZgdE.png

    Код в файле — jquery.formstyler.js:

    if (el.is('[multiple]')) doMultipleSelect(); else doSelect();
    
  12. А как можно сделать мультивыбор чекбоксов …
    когда к примеру есть список с файлами и нужно выбрать все файлы (тоесть все чекбоксы) нажав всеголишь на один чекбокс ???

  13. Доброго времени суток. В очередной раз используя ваш стилизатор, столкнулся с такой проблемой: при отправке данных формы, если не перегружать страницу, не срабатывает обнуление значений .jq-file__name. Для обнуления использую. trigger ('refresh'). Подскажите, в чем проблема? Заранее благодарен.

    • Данный триггер не предусматривает обнуления поля, он реагирует только на состояние :disabled.

      Как вариант решения — удалить из DOM input[file] и создать новый, к которому применить стайлер.

  14. Не работает с такими вещами валидация, так как элемент оригинальный находится сами знаете где…

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

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

    Можете что-нибудь подсказать?

  16. одиночный селект не настраивается по ширине. в селектке прописал style="width: 560px;", но ширина все равно берется из стилей.

  17. Версия Jquery 1.9, ваш стилизатор почему-то не работает, пишет

    TypeError: f.eq(...).prop is not a function
  18. Огромное спасибо автору!!! Великолепно!

  19. Хотелось бы реализовать функционал кнопки «Переключить галочки» для чекбоксов из демо-примера в виде другого чекбокса. Кликаешь на верхний чекбокс и отмечаются остальные.
    Перенес ваш код отвечающий за работу этого функционала:

    	
           $.fn.toggleChecked = function() {
    		return this.each(function() {
    			this.checked = !this.checked;
    		});
    	};
    	
    	$('button.check').click(function() {
    		$('div.e_pages').find('input').toggleChecked().trigger('refresh');
    		return false;
    	})

    Поставил кнопку

    <button type="submit" class="check">

    — все работает!
    Присвоил нужному checkbox-у класс check и увидел, что он перенесся в заменяющий его стилизованный span. Заменил в коде на

    $('span.check').click(function() 

    , но этот клик вообще не обрабатывается. Скорее всего из-за того, что в вашем основном JS-коде похожая конструкция обрабатывает смену класса: checked.

    Как порекомендуете реализовать такую идею? Спасибо!

  20. Если навешать обработчиков на элементы форм, они не работают.
    например
    $('input[type="radio"][name="ololo"]').click (function () {
    alert ('ololo was clicked!');
    });
    А вот uniform умеет (зато не умеет селекты стилизовывать)
    Можно это исправить в плагине?

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