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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Плагин «jQuery Form Styler» Подключение плагина ...

Полезные комментарии (10)
Комментарии (2 599)
  1. 1
    Сергей

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

    Было бы супер, если при поиске после ввода начала слова, можно бы было выбирать из предложеных вариантов стрелочками на клавиатуре, а не кликать мышкой.

  2. 2
    Вячеслав

    Если select находится близко к правому краю экрана, для разворачивания его влево, а не вправо нужно в jquery.formstyler.js (строка 440)
    if (liWidth1 > selectbox.width()) {
    dropdown.width(liWidth1);
    }
    изменить на
    if (liWidth1 > selectbox.width()) {
    if(liWidth1 + selectbox.position().left + selectbox.width() > screen.width) {
    dropdown.css(«left»,selectbox.width()-liWidth1+’px’);
    }
    dropdown.width(liWidth1);
    }

  3. 3
    игорь
    @

    а как сделать чтобы он поверх других элементов открывался
    а то заезжает под блоки иные

  4. 5
    игорь
    @

    пробовал
    ставил там 9999999999
    нет эффекта

  5. 7
    Виталий
    @

    Делаю так:

    <input type="radio" name="radio1" value="1" /> Первый параметр
    <input type="radio" name="radio2" value="2" /> Второй параметр
    <input type="radio" name="radio3" value="3" /> Третий параметр
    

    Кликаешь первую радио кнопку, поток кликаю вторую, но предыдущая не меняет стиль на вкл. Тупо все кнопки выделяются.

    Как лечится?

  6. 12
    Zoxon

    Плейсхолдер на селекте не работает, что я делаю не так?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	<title>Document</title>
    	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    	<script type="text/javascript" src="js/jquery.formstyler.js"></script>
    	<link rel="stylesheet" href="css/form.css" />
    	<script type="text/javascript">
    	$(document).ready(function() {
    		$('select, input').styler();
    	});
    	</script>
    </head>
    <body>
    	<select name="search-form__region" id="search-form__region" data-placeholder="Выберите регион">
    		<option value="0" label=""></option>
    		<option value="1" label="Значение 1">Значение 1</option>
    		<option value="2" label="Значение 2">Значение 2</option>
    		<option value="3" label="Значение 3">Значение 3</option>
    		<option value="4" label="Значение 4">Значение 4</option>
    		<option value="5" label="Значение 5">Значение 5</option>
    	</select>
    </body>
    </html>
    
    
  7. 15
    Фарит
    @

    Уважаемый, Dimox. А Вы недостаток с Mac OS решать не будете?)

  8. 18
    Иван

    Здравствуйте. А этот плагин поддерживает выпадающий вводимый список?

    <input list="list_name">
  9. 20
    Алексей

    всегда проверяйте обрамлены ли радиокнопки тэгом form если нет, то радио работать не будут) странно конечно)

  10. 28
    Артем

    Как прокинуть клик со стилизованного элемента на его input?

  11. 29
    Артем

    В общем придумал как прокинуть клик вниз на input, использовал калбэк onFormStyled

    $('.jq-radio').each(function () {
    $(this).on('click', function (e) {
    var $this = $(this),
    clicked = $this.data('is_clicked');
    if (!clicked) {
    $this.data('is_clicked', true);
    $this.find('input').click();
    }
    })
    });
    
  12. 30
    Айрат

    Проверка на iOS срабатывает и на WP8 смартфонах, немного поправил:

    var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false;

  13. 32
    Айрат

    Ну как-то так:

    Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; Nokia; Lumia 620) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

  14. 34
    Алексей

    добрый день!
    подскажите что нужно сделать чтобы начал работать следующий кусок кода, после применения styler?

    $(".coolfilter-item-checkbox input:checkbox, .coolfilter-item-select input:checkbox").click(function(){
    	console.log($(this));
    });
    
  15. 43
    Артем

    Хотелось бы больше колбеков, например
    OnBeforeElementStyled(this = input)
    OnAfterElementStyles(this = input, elem = обертка styler например $(‘.jq-radio’) если это радиобатон итд )

      • 45
        Артем

        OnBeforeElementStyled — пригодится для модификации инпута перед стилизацей пока не знаю зачем может понадобится
        OnAfterElementStyled — 100% must have, например для проброски своих евентов на манипуляции со стализационной оберткой
        тотже код для прокидывания клика на радиобатон будет проще и элегантнее и быстрее работать чем мой код приведенный выше

        OnAfterElementStyled: 
        function($styled) {
         $styled.on('click',function(e){
         e.stopPropagination();
         $(this).trigger('click');
         })
        }
        

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

  16. 46
    Вячеслав

    Добрый день.

    Не выводится в селекте текст по умолчанию. Выводится сразу текст selectPlaceholder’а.

  17. 51
    Чингиз

    Добрый день!
    Прежде всего хотелось бы вас поблагодарить за проделанную вами работу.
    Постоянно слежу за новыми версиями вашего плагина, но вот при использовании версии 1.6.1 перестал работать некоторый функционал, связанный с элементом select. Замечу, что в предыдущих версиях всё работало отлично.
    Если форма скрытая, то при ее последующем отображении не работают выпадающие списки.
    Начал смотреть код и сравнивать с версией 1.6, оказалось, что если в строчке 429 вместо кода
    l.css({‘display’: »});
    вернуть как было до этого
    l.css({‘display’: ‘block’});
    то выпадающие списки отображаются.

    trigger(‘refresh’) использую.

    Подскажите, что делать в данном случае?

  18. 54
    Александр

    Как ограничить добавление полей для выбора файлов, например до 5

  19. 55
    Антон

    Приветствую! Спасибо за плагин.
    Хотелось бы уточнить — в описании есть пункт для селектов:
    *Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
    На моей тестовой странице селект, с заведомо очень длинным пунктом, просто добавляет горизонтальную прокрутку вместо того, чтоб сменить привязку дропдауна с левой стороны на правую (или по центру селекта). Как добиться умного позиционирования из коробки? Или единственное решение — воспользоваться вариантом предложенным в комментарии Вячеслава (1577)? Спасибо за внимание.

  20. 56
    Антон

    UPD: вот jsfiddle моего случая с нерабочим «умным позиционированием». Что я делаю не так?

  1. 1
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  2. 2

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

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

    Буду признателен, если кто-то предложит более красивое решение.

  3. 3

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  4. 4

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  5. 5
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  6. 6
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  7. 7

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    @
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  9. 9
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  10. 10

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

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий