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

  1. обнаружено 2 бага в версии 1.6.1
    1) Селект с замещающим текстом (placeholder)
    если кликнуть на селект и нажать на любую клавишу на клавиатуре, то текст плейсхолдера пропадает
    строка 682
    2) Если селект находится внизу страницы, то scrollTop у “.jq-selectbox__dropdown ul” тоже прокручен вниз и первых элементов не видно.
    Чтобы это проследить нужно страницу прокрутить вниз, скролл поместить за 200px от низа браузера (добавить побольше option-в чтобы скрол был у списка)
    у себя на сайте это исправил так:
    onSelectOpened: function() {
    var ul = $(this).find(‘ul’);
    setTimeout(function(){ul.scrollTop(0)},1);
    }

    PS классный плагин, спасибо

  2. Здравствуйте Dimox спасибо большое за плагин
    Но есть проблема и непонимаю вообще как в таком плагине она может присутствовать, если инспектировать код то checked не ставится, ставится класс оболочке но checked не ставится, как так? в safari я инспектором проверял и в мозиле так же через файрбаг, подскажите пожалуйста в чем дело?

  3. А есть ли деструктор?

  4. Добрый день, Dimox!

    Скачал ваш плагин, хотел использовать на своем проекте. Но не могу понять почему у меня не работают радио. Не переключается в одного на другой.

    Пример моего кода http://jsfiddle.net/wnesx8hw/2/

  5. Уже голову сломал – почему так происходит???
    http://i.imgur.com/LOBA3Su.png

  6. Спасибо, вроде разобрался… Этот overflow меня постоянно в ступор вводит))) Только теперь другая проблема, как сделать, что бы пункты в dropdown не переносились на другую строку? Пробовал nowrap и другие – не помогает… Уже и не знаю что ещё можно. Подскажите )
    http://i.imgur.com/tWP27ch.png

  7. Перечитал все сообщения с первой страницы, но, так и не нашел ответа на свой вопрос.
    Суть проблемы: при выборе Страны, во втором селекте не отображаеются Регионы/Области.
    Вот как они отображаются:

    
    <div id="country_id">
    <select name="country_id">
                  <option value=""><?php echo $text_select; ?></option>
                  <?php foreach ($countries as $country) { ?>
                  <?php if ($country['country_id'] == $country_id) { ?>
                  <option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
                  <?php } else { ?>
                  <option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
                  <?php } ?>
                  <?php } ?>
                </select>
    </div>
    

    Пробовал подключить Ваш плагин вот так:

    
    <div id="zone_id">
    <select name="zone_id">
                </select>
                <?php if ($error_zone) { ?>
                <span class="error"><?php echo $error_zone; ?></span>
                <?php } ?>
    </div>
    

    Не получается… Подскажите решение.
    Спасибо.

  8. Уважаемый Dimox, подскажите КАК мне два связанных селекта “подружить”?
    Очень нуна (мой код выше – в сообщении #1704)
    Уже как только не пробовал:

    <script>  
    (function($) {  
      $(function() {  
      $('select').selectbox();  
      $('#country_id').change(function() {  
      $('#zone_id').trigger('refresh');  
      });
      })  
    })(jQuery)  
    </script> 

    Ума не приложу…

    http://i.imgur.com/cGWUUmX.png

  9. В общем, я отказался от этого плагина. Не знаю почему но со связанными (зависимыми) селектбоксами от работать отказывается. Тогда как, со всем остальным всё прекрасно работает.. Очень жаль, что никто не смог помочь((

    • Вы просто не правильно используете.

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

      
      <script>   
      (function($) {   
      $(function() {   
      $('select').selectbox();   
      $('#country_id').change(function() {   
      $('#zone_id').trigger('refresh');   
      });  
      })   
      })(jQuery)   
      </script>   
      

      заменить на

      
      <script>   
      (function($) {   
      $(function() {   
      $('select').styler();   
      $('#country_id').change(function() {   
      $('#zone_id').trigger('refresh');   
      });  
      })   
      })(jQuery)   
      </script>   
      
  10. Подскажите почему может не работать селект в iPhone. Не раскрывается просто. Display block и z-index не добавляются. В десктопе и на адройде все ок.

  11. Здравствуйте! Вопрос по производительности. Имею на странице примерно 30 селектов, в которых около 1000 значений. Их стилизация занимает 4-5 секунд, что совсем не годится. Возможно ли что-то сделать чтобы загрузка происходила быстрее? Если нет, то не подскажете ли более простые плагины с ограниченным функционалом (интересует изменение цвета опшенов, указание через css работает не во всех браузерах)? Спасибо

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

    
    {literal}<script language="javascript">
    function usedefaultns() {
        jQuery(".domnsinputs").attr("disabled", true);
    }
    function usecustomns() {
        jQuery(".domnsinputs").removeAttr("disabled");
    }
    jQuery(document).ready(function(){
    {/literal}{if $defaultns}usedefaultns();
    {/if}
    {literal}});
    </script>{/literal}
    
    
    <li>
    										<input type="radio" name="nschoice" value="default" id="nschoicedefault" onclick="usedefaultns()"{if $defaultns} checked{/if} /> 
    										<label for="nschoicedefault">{$LANG.nschoicedefault}</label>
    									</li>
    									<li>
    										<input type="radio" name="nschoice" value="custom" id="nschoicecustom" onclick="usecustomns()"{if !$defaultns} checked{/if} /> 
    										<label for="nschoicecustom">{$LANG.nschoicecustom}</label>
    									</li>
    
    

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

  13. Приветствую, скринт не стилизирует select с multiple, те при включениии multiple, в окне со списком просто появляются стрелочки, а выпадающего списка нет, как при использовании без multiple, как быть то?

  14. Dimox
    С мультиселектом разобрался, появилась новая проблема, у меня сайт на движке DLE, и в нём используются доп поля, а так же установлен загрузчик фото и файлов из доп полей (модуль), так вот при подключении скрипта

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

    Не работает загрузчик фото, не открывается окно загрузки

  15. если кто-то вдруг захочет использовать данный плагин в rails:

    Используем плагин через rails-assets.org, который подружит bower плагин с bundler (кстати, у тебя какой-то не кошерный bower.json)

    Gemfile:

    source 'https://rails-assets.org' do
    gem 'rails-assets-jquery.form-styler'
    end

    Подключаем в application.js сам файл:

    //= require jquery.form-styler/jquery.formstyler

    И всё :)

  16. Здравствуйте.
    Плагин отличный, все супер. Вот только столкнулся с проблемой. У меня в селекте присутствует onclick в option

    <option onclick="location.href='/kratki'" value="Kratki (Польша)">Kratki (Польша)</option>

    Который при выборе производителя ведет на его страницу.
    А данный плагин не поддерживает данное свойство. Можно ли как-то дописать его, чтобы он onclick прибавлял в li. Например

    <ul><li><a href="#" onclick="location.href">текст</a></li></ul>
  17. Добрый вечер, есть небольшая проблема, а именно не передаются аттрибуты data-* у option. Есть следующий код:

    
    <select>
    <optgroup label="name">
    <option data-value="name1">name 1</option>
    <option data-value="name2">name 2</option>
    <option data-value="name3">name 3</option>
    </optgroup>
    </select>
    

    при таком формате аттрибут data-value не передастся в li, после запуска styler, а вот если убрать обертку из optgroup – то data-value передастся… Подскажите – это я не правильно что-то делаю или баг плагина?

    • Это недоработка в плагине. Я забыл добавить соответствующий код для данного случая. В следующей версии будет исправлено. Спасибо, что сообщили.

      Нужно всего лишь заменить эту строку:

      li = '<li' + dataJqfsClass + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>';

      на такую:

      li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>';
  18. Возможно отвечали, но все же – как принудительно сделать открывание вверх. У меня селект в футере и сам он не хочет вверх открываться.
    Спасибо.

  19. пример : Селект с шириной 200 пикселей, имеющий пункт с длинным текстом.

    не могу понять как сделать ширину дропдайна динамичной относительно самого широкого пункта, когда селект имеет заданную ширину.

    пишу как в примере

    — Выберите —
    Пункт 1
    Пункт 2
    Какой-то пункт с очень-очень-очень длинным-длинным-длинным текстом
    Пункт 4
    Пункт 5

    css:
    .jq-selectbox.width-200 {
    width: 200px;
    }

    но дропдаун всё равно шириной как задан селект 200px

  20. Подскажите пожалуйста, как стилизовать динамический select?

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