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

  1. Евгений
    6 лет назад

    Добрый день! Большое спасибо за плагин! А планируется ли реализация поддержки браузеров на мобильных телефонах, либо есть ли какой то способ включить поддержку мобильных устройств? Дело в том, что я хотел бы использовать ваш благин в мобильной версии сайта. Особенно мне нравится функция поиска по списку в селектах. У меня есть один селект где порядка 75 пунктов, и поиск по этим пунктам очень удобная функция, но она к сожалению работает только через браузер компьютера, при заходе через браузер мобильного, например через Safari на iOS, селект работает как стандартный селект, а именно jq-selectbox__dropdown не отображается, а открывается стандартный способ выбора пункта селекта как если бы плагин не был использован.

    • Не нужно обобщать мобильные устройства, потому что такая ситуация только в iOS.

      Дело в том, что я не знаю, каким образом в iOS спрятать стандартный выпадающий список, поэтому я его спрятал у стилизованного селекта, чтобы не дублировалось.

      Если найду решение, то конечно же сделаю, как положено.

  2. Было бы удобно если селектам добавлять классы по тому как они открываются вверх или вниз.

    • Для чего это может быть нужно?

      • Собственно для оформления, вчера как раз допиливал эти классы, чтобы сделать вот такое. Если открывается вверх, то и стрелочка должна быть под выпадающим списком.

        Столкнулся с проблемой, что при назначении свойств селекту

        $('select').prop('disabled', true);

        плагин не подхватывает их. Посоветуете ли как победить?

        • Делайте вот так:

          $('select').prop('disabled', true).trigger('refresh'); 

          По отлову позиционирования можно ориентироваться на атрибут style, как вариант.

          • Таким способом не срабатывает

            $('select').prop('disabled', false).trigger('refresh');
            • Вместо false поставьте true.

              • if($var == 1) $('select').prop('disabled', true).trigger('refresh');
                else $('select').prop('disabled', false).trigger('refresh');

                При первом срабатывании ($var = 1) все нормально и селект становится disabled, при первом срабатывании ($var != 1) тоже все ок и он становится активным, но при повторном срабатывании ($var = 1) disabled применяется только к селекту, но не добавляется класс disabled к div.jq-selectbox

                • Да, с этим есть косяк в текущей версии плагина. Когда я внес изменения, связанные с утечкой памяти, данный момент поломался. Поэтому рекомендую пока использовать версию 1.5.1.

  3. Здравствуйте.

    Решил попробовать поработать с Вашим плагином. Все отлично. За исключением одного момента. У меня на сайте два селекта (к примеру). Делаею выбор в первом, аяксом посылаю запрос, получаю ответ и вставляю внутрь второго селекта. Т.е. формирую для второго селекта динамически.

    После получения ответа и вставки во строй селект использую триггер refresh:

    
    				success: function(json) {
    					jQuery('#s2').html(json);
    					setTimeout(function() {
    						jQuery('#s2').trigger('refresh');  
    					}, 100) 					
    				},
    
    

    Но почему то обновляет значение только один раз. Второй уже не отрабатывает. НЕ подскажете в какую сторону копать?

    Спасибо.

  4. Выложил новую версию — 1.5.3.

  5. Выложил новую версию — 1.5.3.1.

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

  7. Здравствуйте. Спасибо за отличный скрипт. Когда при развернутом списке нажимаешь кнопки вверх или вниз, он не прокручивается. В вашем примере это видно: http://dimox.github.io/jQueryFormStyler/demo/#select — «Селект с группировкой пунктов» (воспроизводится в FF23, Chrome, IE8). Также, если у селекта есть поиск, эти клавиши нефункциональны, потому что фокус всегда стоит на поле поиска.

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

      У меня в любом браузере прокручивается. Не знаю, почему у вас не работает.

      Также, если у селекта есть поиск, эти клавиши нефункциональны, потому что фокус всегда стоит на поле поиска.

      Уберу фокус в следующей версии.

  8. Александр
    6 лет назад

    Здравствуйте!
    Отличный плагин! Но есть вопрос: как использовать 2 селекта на одной странице с разным стилями?

  9. Кстати, можно еще стилизовать ползунок в селекте, а то что-то в разных браузерах он разный, в вин вообще не очень с скроллом((
    на будущее, подумай)

  10. Выложил новую версию — 1.5.3.2.

  11. Извиняюсь за немного нуюовский вопрос, но не могу решить задачку..
    Имеется форма отправляемая по технологии ajax без перезагрузки страницы:

    <form id="frm1" action="" method="post">
                                    <select>
    					<option>-- Выбрать --</option>
    					<option>Опция 1</option>
    					<option>Опция 2</option>
    				</select>
    <input class="styler" type="submit" name="btn" value="Отправить" />
    </form>

    После того, как форма отправлена и получен результат ошибка или успех, пропадает обертка от select. Т.е. пропадает стилизация списка. Пытался использовать refresh , но результата не добился. Если не трудно, подскажите как с этим бороться.

  12. Столкнулся с такой проблемой, если селект находится на скрытой форме, то он (div.jq-selectbox__dropdown) не имеет ограничения по высоте, что крайне не удобно при количестве элементов 150+
    Можно это как то исправить?

    • Высота выпадающего списка рассчитывается лишь тогда, когда псевдоселект видим. Поэтому, чтобы это работало, нельзя его скрывать через display: none. Найдите другой способ скрытия селекта, например, поместите в div в с нулевой высотой и overflow: hidden, либо что-нибудь подобное. Хотя я не уверен, что при этом все будет в порядке.

      • Dimox, интересный момент.
        Можно стилизовать, а потом скрыть, наподобие:

        
        (function($) {
        	$(function() {
        		$('.styler').styler();
        		$('#hide-me').hide();
        	})
        })(jQuery)
        

        И тогда обычный код с переключением блоков с стилизованными input’ами работает нормально.

    • Задайте вашему начальному селекту id.
      Пример

      <select id="primer"></select>

      После обработки вашего селекта плагином на выходе id обертки селекта будет primer-styler.
      После этого можно принудительно задать нужную высоту средствами css исключительно для этого списка.

      #primer-styler ul {height:200px;}
  13. Возникает проблема когда в select options с одинаковыми названиями. Он перестает реагировать на change

  14. Возникла такая проблема..
    Нужно вывести радиокнопки через маркированный список.

    <ul class="options">
    <li><input type="radio" name="option" value="" /></li>
    <li><input type="radio" name="option" value="" /></li>
    <li><input type="radio" name="option" value="" /></li>
    </ul>

    После стилизации они работают каждая по себе, а не в группе.
    Не в курсе как это исправить?

  15. http://cdn.joxi.ru/uploads/prod/2014/06/16/f2a/b6d/7a6e395d652b89461d9b0d8c92ff5f27dfa8f7b4.jpg

    При таком раскладе не хватает места для строки. Скрол перекрывает последние буквы

  16. Есть ли возможность стилизовать чекбоксы и радиобоксы по своему?
    Предлложенные Вами не устраивают дизайнера. А картинки у вас формируются как то странно, не могу найти, где их менять

  17. if (selCloneWidth == selectbox.width()) {
    //divText.width(liWidth2);
    liWidth1 += selectbox.find(‘div.jq-selectbox__trigger’).width();
    }
    Стоит убрать из скрипта эту непонятную конструкцию которая лишь портит ширину селекта магическим образом.

    • Нельзя, селект по умолчанию должен иметь ширину самого широкого пункта. На странице примеров на втором селекте (Селект без заданной ширины, имеющий пункт с длинным текстом) можно увидеть разницу при отключении этой строки.

      • я могу на своем сайте показать 2 примера где абсолютно одинаковые 2 селекта, но в разном окружении блоков, выглядят из за этой строки по разному. Убрав ее я добился верного отображения.

      • Нашел в чем баг с этим параметром!
        Когда у нас название опшена меньше чем ширина селекта у нас прописывается фиксированная ширина класса (jq-selectbox__select-text) по самому длинному названию.
        Далее если выберешь самое длинное название(Категория прайса) в списке и обновишь страницу (делать нужно в ФФ, он запоминает выбранный элемент из прошлого запроса) то ты увидишь что фиксированная ширина не установилась и наш селект ведет себя как должен, всегда подстраивается под самое длинное название.

        Если мы хотим от этого уйти то нам лишь необходимо задать размер селекта
        .jq-selectbox.(class-select) {width: 100px}

        То есть убрав //divText.width(liWidth2); мы добиваемся большей гибкости чем с ней. Наш селект всегда будет подстраиваться под длинное название, если это не нужно, то задаем ширину и наслаждаемся

        • Я сделал по аналогии с поведением стандартного селекта, ширина которого по-умолчанию равна ширине самого длинного пункта. Так что убирать эту строку из плагина я не буду.

  18. Замечательный плагин — но если элемент select использовать в модальном окне(jq dialog) — то «умная компоновка» выпадающего списка не работает(т.к. расчет координат ведется не от модального, а от основного окна). Подскажите пожалуйста решение.

  19. Здравствуйте.

    Ерунда какая-то. Последняя версия плагина, на страницу приходят аяксом radio

    Прописал:

    
    success: function(json) {
    	jQuery('#type').html(json);
    	setTimeout(function() {  
    		jQuery('.ch2').trigger('refresh');  
    		jQuery('.ch2').css({'border':'1px solid #FF0000'});  
    	}, 2000)  
    },
    

    Тишина, ничего не происходит. jQuery(‘.ch2’).css({‘border’:’1px solid #FF0000′}); добавлен специально чтобы посмотреть отрабатывает ли таймаут. Ставил 1,5,1 — то же самое.

  20. Доброго дня! Помогите пожалуйста чайнику… никак не могу разобрать. Virtuemart 2.6 + Joomla 2.5.20.

    http://stroyprom.by/myshop/front-page/otdelochnye-materialy/gipsokarton-profilja.html

    Пытаюсь стилизовать select модуля Virtuemart 2 Multiple Customfields Filter 2 и привести его к общему знаменателю с выпадающим списком «Название товара +/-» (над товарами категории).

    перед тегом добавил:

    <script src="jqueryformstyler/jquery.formstyler.min.js"></script>
    <script src="jqueryformstyler/jquery.formstyler.min.js"></script>
    <script>  
    (function($) {  
    $(function() {  
      
      $('input, select').styler();  
      
    })  
    })(jQuery)  
    </script>
    <script>
    (function($) {  
    $(function() {  
      
      $('button').click(function(e) {  
        e.preventDefault();  
        /* делаем чекбокс неактивным */  
        $('input:checkbox').attr('disabled', true)  
          /* обновляем состояние псевдочекбокса */  
          .trigger('refresh');  
      })  
      
    })  
    })(jQuery)
    </script>

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

    <?php
    defined('_JEXEC') or die('Restricted access');
    /**
    * Param Filter: Virtuemart 2 search module
    * Version: 2.0.6 (2013.08.13)
    * Author: Usov Dima
    * Copyright: Copyright (C) 2012-2013 usovdm
    * License GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
    * http://myext.eu
    **/
    
    $custom_class = isset($custom_params['af']) &amp;&amp; (int)$custom_params['af'] ? ' custom_child custom_child-'.(int)$custom_params['af'] : '';
    $custom_pid = isset($custom_params['af']) &amp;&amp; (int)$custom_params['af'] ? ' data-pid="'.(int)$custom_params['af'].'"' : '';
    $custom_pval = isset($custom_params['av']) &amp;&amp; is_array($custom_params['av']) &amp;&amp; count($custom_params['av']) > 0 ? ' data-pval="'.implode(';',$custom_params['av']).'"' : '';
    
    $html .= '<div class="custom_params custom_params-'.$type->virtuemart_custom_id.'">';
    $tip = !empty($type->custom_tip) ? ' <span class="mcf_tip hasTip" title="'.$type->custom_tip.'">[?]</span>' : '';
    $selected_values = JRequest::getVar('cv'.$type->virtuemart_custom_id, array());
    $selected_values = array_diff($selected_values,array(''));
    $reset = !empty($selected_values) ? '<a class="reset" href="#">[x]</a>' : '';
    $html .= '<div class="heading">'.JText::_($custom_params['n']).$tip.$reset.'</div>';
    if(!empty($customfield_value)){
    	$html .= '<div class="values cv-'.$type->virtuemart_custom_id.$custom_class.'" data-id="'.$type->virtuemart_custom_id.'"'.$custom_pid.$custom_pval.'>';
    	$html .= '<select name="cv'.$type->virtuemart_custom_id.'[]" rel="'.$type->virtuemart_custom_id.'">';
    	$html .= '<option value="">'.$mcf_customfields_select_heading.'</option>';
    	foreach($customfield_value as $v){
    		$vid = $custom_params['ft'] == 'int' ? $v : $v->id;
    		$value = $custom_params['ft'] == 'int' ? $v : $v->value;
    		$counts = $custom_params['ft'] == 'int' ? $custom_int_count : $custom_text_count;
    		$selected = !$param_search_ids_clear &amp;&amp; isset($selected_values) &amp;&amp; in_array($vid,$selected_values)? ' selected="selected"' : '';
    		/* ----- + Count calculate ----- */
    		$count = calcCount($counts,$vid);
    		$count_sum += $count;
    		$count_txt = $count_show ? ' ['.$count.']' : '';
    		$count_show ? ' ['.$count.']' : '';
    		$disabled = $count == 0 ? $count_zero_show_txt : '';
    		$disable_css = $count == 0 ? ' '.$count_zero_show : '';
    		/* ----- - Count calculate ----- */
    		if($count_zero_show != 'hidden' || $count > 0){
    			$html .= '<option value="'.$vid.'"'.$selected.$disabled.'>'.$value.$count_txt.'</option>';
    		}
    	}
    	$html .= '</select>';
    	$html .= '</div>';
    }
    $html .= '</div>';

    подскажите что нужно еще сделать плз. Спасибо.

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