Главная › JavaScript

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

2614 комментариев

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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Смотрите также

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

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

  1. Александр
    8 лет 2 месяца назад

    Здравствуйте. Не получается заставить заработать чекбокс, если добавляется информация динамически, чекбокс стилизуется после обновления страницы.
    Пытаюсь сделать в init. js вот так

    (function($) {
$(function() {
  $('input, select').styler();

});
})(jQuery);

$('#clickAddress').click(function(e) {
  		e.preventDefault();
  /* делаем чекбокс неактивным */
  $('input:checkbox').attr('disabled', true)
    /* обновляем состояние псевдочекбокса */
    .trigger('refresh');
});

    Я, как понимаю, делаю что-то не так?

  2. Андрей
    8 лет 2 месяца назад

    Привет, как вызвать плагин при динамическом добавлении контента в dom?

  3. alex
    8 лет 2 месяца назад

    Добрый день
    Можно ли через данный плагин реализовать prntscr.com/7v6t72?

  4. vlad
    8 лет 2 месяца назад

    Привет последнее время стал замечать проблему,
    SSMaker.ru/06e7509e/
    Копирую все с примера … но почему он все радио отмечает и не снимает потом … в чем может быть проблема? стоит только твой плагин и jquery 11

  5. Федор
    8 лет 2 месяца назад

    Здравствуйте.
    Прекрасный плагин. Но у меня небольшая проблемка. На странице находится около 50 селектов. И при загрузке страницы происходит чувствительная задержка. Возможно ли как-то ее устранить?

  6. Евгений
    8 лет 2 месяца назад

    Здравствуйте.
    Благодарю за скрипт. На многих сайтах использую ваш скрипт, но очень не хватает мультиселектора в виде выпадающего списка с Checkbox-сами слева, по аналогии как с одиночными селектами. Приходится ставить сторонние скрипты, что не очень удобно. Хочется все-таки иметь все в одном пакете.

    Я ускорения реализации я готов немного профинансировать данную опцию :).
    Благодарю и надеюсь на ваш ответ

  7. Margo
    8 лет 2 месяца назад

    Спасибо за классный и простой в использовании скрипт!
    Вопрос по. Как можно оставить стандартную фразу () после выбора файлов «Число файлов (х)» вместо перечисления названий файлов (как сейчас)?
    Заранее благодарю

  8. Евгений
    8 лет 2 месяца назад

    В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.

    Планируется ли решение данного вопроса? :)

  9. Margo
    8 лет 2 месяца назад

    А мне ответьте, пожалуйста!

  10. Константин
    8 лет 2 месяца назад

    Дмитрий, добрый день!
    Есть такой вопрос.
    При выборе чекбокса, можно ли сделать чтобы подсвечивался и текст лейбла?

    <label><input type="radio" name="" class="radio" /> название лейбла</label>

    Реально ли в данном случае при клике добавить тегу какой-нибудь класс?

    PS. Извиняюсь, если дублирую вопрос.

  11. m1ron
    8 лет 2 месяца назад

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

  12. Евгений
    8 лет 2 месяца назад

    Было бы отлично если б ваш плагин поддерживал структуру вложенных списков при использовании optgroup. Это нужно для реализации подобных штук prntscr.com/80a6dp

  13. Александр
    8 лет 2 месяца назад

    Привет Дима.

    В общем, с радио есть беда! Без скрипта работает хорошо, а при подключении скрипта выбор идёт, а снятие выбора не происходит. Причем name везде одинаковый, пробовал и с лэйблами и без них. Обновлял версию jquery.

    vlad 10 дней назад уже написал об этом баге, но ты так и не прокомментировал его.

    Видимо, решения пока нет. Думаю, это какой-то баг в chrome (в других браузерах не тестил).

    Ждём решения. Пока использует другие костыли.

  14. Сергей
    8 лет 2 месяца назад 
    $('#select1').change(function(){
		$('#select2 :contains('+$(this).val()+')').attr("selected", "selected");
	});

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

  15. Евгений
    8 лет 1 месяц назад

    странная реализация multiple select… почему вы не сделали его точно таким же как и обычной, только с возможностью выбора нескольких пунктов?

  16. Денис
    8 лет 1 месяц назад

    При тестировании на мобильном устройстве у select не выпадет выпадающий список, как можно исправить данную проблему
    На демо странице аналогичная проблема

  17. at
    8 лет 1 месяц назад

    Приветствую. В первую очередь, спасибо за плагин. Есть вопрос: зачем здесь, например, возвращается false? Дело в том, что этим самым прекращается дальнейшая обработка события, и его уже невозможно перехватить. Это касается не только селектов, но и чекбоксов с радио кнопками.
    Вот пример. Кнопка «Show tip» отображает какую-то, допустим, подсказку, которая должна скрываться по клику в любом месте документа. Однако, когда клик приходится на стилизованный элемент формы (именно на сам элемент, не лейбл), подсказка остается видимой. Кнопкой «Style/Unstyle elements» можно применять/отменять стилизацию, и убедиться, что клик по штатному селекту или чекбоксу подсказку таки скрывает, как положено.
    Заранее прошу прощения, если это я что-то делаю не так :)

  18. eugene
    8 лет 1 месяц назад

    Несколько раз сталкивался с «багом» радиокнопки, при котором переключатель включается и больше не выключается (не убирается prop checked и класс. checked).
    Думаю, это кому-нибудь сэкономит время на поиск решения: радиокнопки обязаны (!) находиться внутри тега FORM.

  19. Klb
    8 лет 1 месяц назад

    Коректно ли работает на мобильный iOS? Имеем проект с данным модификатором селектора, win-base машины рендерят и отрабатываю скрипт нормально.
    На iPad — рендер блока штатный, однако никакого события по клику не происходит (выпадания списка).
    Автор, делали ли проверку скрипта на «яблоках»?
    Спасибо.

  20. Piotr
    8 лет 1 месяц назад

    Nice plugin!
    I want to use it on a page for formatting one checkbox.

    <input class="check" type="checkbox">
$( document ).ready(function() {
   (function($) {  
	    $(function() { 
			$('.check').styler();
		}); 
	})(jQuery);
});

    It works great.
    Now, I would like to catch the «click» event, but obviously the following code does not work:

            $('.check').click(function() {
            alert( "Handler for .click() called." );
        });

    Can you suggest something?

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