Главная 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. Вот, дополнил Вашу функцию для радиокнопки (пример был выше), чтобы при смене выбора менялся цвет текста (класс родителя) этого пункта, в след за отметкой…
    Не уверен, что грамотно, но вроде работает:

    $('#ucp input').styler().change(function() {
    	if ($(this).is(':checkbox')) {
    		if ($(this).is(':checked')) {
    			$(this).parents('tr').addClass('checked');
    		} else {
    			$(this).parents('tr').removeClass('checked');
    		}
    	} else if ($(this).is(':radio')) {
    		if ($(this).is(':checked')) $('input[name="' + $(this).attr('name') + '"]').next().parents('tr').removeClass('checked');
    		$(this).parents('tr').addClass('checked');
    	}
    });

    Может быть есть лучше вариант? :)

  2. Помогите пожалуйста. Пытаюсь разобраться с плагином, но в ие7−9 не работает. Хочу подключить кастом селект. Опыта в подключении и настройки плагинов нет. В чем может быть ошибка. Прилагаю код:

    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Giga space</title>
    	<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    	<script src="js/jquery.formstyler.js" type="text/javascript"></script>
    	<link media="all" rel="stylesheet" type="text/css" href="css/selectbox.css" />
    	<script type="text/javascript">
    	(function($) {
    	$(function() {
    
    	  $('select').styler();
    
    	})
    	})(jQuery)
    	</script>
    • Я уже задавал этот вопрос… Вот пример его решения… Т. е. селекты class="styler" будут обрабатываться плагином, а все остальные настраивайте через свой CSS как Вам нравится…

      Удачи! :)

      • Я не понимаю как эта ссылка относится к моему вопросу. У меня все селекты на странице должны быть стилизированые. Проблема моя состоит в другом:

        Сам плагин у меня подключился во всех браузерах кроме ИЕ7−9. А мне нужна именно поддержка этих браузеров.

  3. БАГ при нескольких вложенных optgroup в optgroup — список превращается в непонятную кашу.

  4. Нужно сделать предупреждение только при выборе в мультиселекте, а при снятии выбора — нет. Вот такой код:

    <select multiple="multiple" onchange="if(this.options[this.selectedIndex].checked = true){ alert('Warning!'); }">

    Везде работает, кроме IE (кстати, если даже отключить плагин, то даже Ваш пример не работает нормально — не передаётся значение)…
    Может быть посоветуете другой вариант для обработки события?

  5. вопрос чайника для поле input[type="text"] нужно вручную прописывать стиль styler то есть

    пробовал

    (function ($) {
    $(function () {

    $('input, select, input[type="text"]').styler ();

    })
    })(jQuery)

    не помогает (

  6. Привет,
    нужно вцепить selected на сам select при изменении, сейчас только на стилизированном селекте оно есть, а на елемент формы значение не пробрасывается.
    Как это правильно сделать?

  7. Было бы круто если бы стилтзовались и текстовые элементы типа text и textarea, ну просто бордюром скругленным, чтобы не париться со стилями самому.

    • Они итак стилизуются, если указан класс .styler. В примерах же показано.

      • Да извиняюсь, не доглядел.
        У меня возникла другая проблема.
        К некоторым элементам типа checkbox или radio прикручены события onclick, но после стилизации они не работают (почему понятно, ведь оригинальные элементы прячутся). Я проблему то конечно решил, но это костыль.
        Было бы здорово, если бы плагин проверял наличие прикрученных событий и копировал их в стилизованные элементы (у меня есть корявый код стилизации элементов, который я писал давно давно, он как раз умел делать такое копирование, мог бы выслать если интересно).

  8. Прошу подсказать, как данный плагин подключить только к элементам с определенными id (кроме определенных id)?

  9. А возможно сделать так чтобы при динамическом изменении элеменотов формы стили так же применялись без использования триггера refresh? Как например через метод live

  10. Как изменять ширину Селект не в css
    у меня на странице нужно несколько селектов с разной шириной, поэтому задание ширины в css для меня не подходит
    если я задаю DIV размер в котором лежит select то он ни как не реагирует.

    • Каждому селекту добавьте свой класс и в каждом классе пропишите соответствующую ширину.

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

        • А по опциям плагина не надо будет бегать? Перекладывать на плагин то, что делается простым CSS — глупость.

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

  11. столкнулся с такой проблемой я select создаю динамически с помощью jquery
    и эти select остаются какими были и не трансформируются.

    пробовал их обновлять
    $('#idSelect').trigger ('refresh');
    но результат тотже, при этом select которые были приписаны в коде страницы успешно изменяются.

    • Думаю, что вызываете триггер не в том месте. Где можно посмотреть весь код?

      • весь код показать не могу (
        (P.S. используется asp.NET)
        вот функция в которой происходят действия.

        function generateSubscription(items, tiers) {
                    $('#subscriptionItems').empty();
        
                    for (var i = 0; i < items.length; i++) {
                        var label = $("<label>")
                                    .attr("style", "font-size:16px; color: #461e00; float:left; text-align:right; width: 60px; margin-right: 10px;")
                                    .text(items[i][1]);
        
                        var options = [$("<option>").val(0).html("Disable")];
                        for (var j = 0; j < tiers.length; j++) {
                            var option = $("<option>").val(tiers[j][0]).html(tiers[j][1] + "." + tiers[j][2]);
                            options.push(option);
                        }
        
                        var id = "idAutomatic" + items[i][0];
                        var select = $("<select>").append(options).val(items[i][2]).attr('id', id) .attr('style', 'font-size:16px; color: #461e00;');
                        
                        div = $("<div>").append(label).append(select).attr('val',items[i][0]).attr('style','margin-top: 10px; margin-bottom: 10px;');
                        $('#subscriptionItems').append(div);
        
                        $('#'+id).trigger('refresh'); //select находит корректно
                    }
                }
        
  12. заранее извиняюсь если мои предложения уже упоминались.
    — было бы круто сделать поддержку иконок у selectbox (для выбора языка показывать иконку страны очень информативно)
    — для сделать изменение значения стрелочками

    • — было бы круто сделать поддержку иконок у selectbox (для выбора языка показывать иконку страны очень информативно)

      Это и сейчас можно сделать. Пример:

      <option class="en">Английский</option>
      .jq-selectbox li.en { ... }
  13. Можно ли изменить цвет текса в .jq-selectbox после выбора любого пункта

  14. Хороший плагин. Все нравится. Хотел бы спросить у вас совет, возможно ли это все в виде combobox запилить. Что бы у пользователя кроме выбора, была возможнь вводить свой текст?

  15. Спасибо за работу! Пока посмотрел всё обзорно, не увидел у Вас конкретной информации о кроссбраузерности и решил бегло прогнать в разных версиях ИЕ. Одиночный селект, который у Вас в демо по JS алертом выводит значение — выводит результат только в ИЕ9+ :(Уже начинаю переживать, точно ли всё будет работать корректно на живом проекте… Попробую ещё. Всё-таки напишите, пожалуйста, в каких версиях браузеров обещаете корректную работу :)

    • Одиночный селект, который у Вас в демо по JS алертом выводит значение — выводит результат только в ИЕ9+

      В стандартном селекте (без плагина) все точно так же, это косяк IE.

      Всё-таки напишите, пожалуйста, в каких версиях браузеров обещаете корректную работу

      Во всех популярных.

      • Спасибо за ответ! И всё-таки, про браузеры я не зря спросил… Вы поймите, что это нужная информация и она должна быть. Например, вот эти товарищи _http://uniformjs.com справа у себя написали, где тестировали. Для разработчика, который потом будет пользоваться плагином, это очень важно.

  16. <input class="styler" type="number" value="0" size="6" />

    Плз, помогите — в интернет эксплорере не показывается как в других. Как-то можно пофиксить до идентичности?

  17. Добрый вечер, есть форма в ней есть checkbox также сть конпка сбросить (input type="reset"), принажатие на неё checkbox не сбрасываются, в чем может быть проблема?

  18. Приветствую. Хороший плагин!

    Заметил два таких момента:
    1) Нет стилизации полосы прокрутки в выпадающем списке селекта, а это порой необходимо. Т. е. получается не полный контроль над внешним видом.
    2) При зажатии кнопки мыши на стилизованных элементах остается возможность выделения текста на странице. Стандартные элементы в этой ситуации отключают выделение текста. Да и просто это не очень красиво смотрится :)

  19. Спасибо за красивый плагин! Использовал предыдущую версию на сайте «мастер-банк» в списке регионов
    www.masterbank.ru/offices
    Всё хорошо, красиво.
    Единственный недочёт, это название класса text. Оно наслаивалось на стандартные классы. Пришлось немножко менять исходники.

    Сейчас начал перерабатывать раздел с банкоматами. Там список побольше и с optgroup. Взял свежую библиотеку.
    Но что-то не заработало в IE8. При развороте списка и попытки его скроллировать. он сразу же сворачивается. Без optgroup такая же лобуда. Пришлось вернуться к предыдущей версии, где такого не наблюдается, переделавть по виду disabled в optgroup.

  20. При переключении радиокнопок в обычно режиме срабатывает js, который выполняет определенные действия. Как это можно реализовать с помощью вашего плагина учитывая что радиокнопки не имеют постоянных значений типа name или id. Спасибо

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