Главная 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. Решил тут обновить с версии 1.3.8

    и вылезло несколько проблем

    1) почему-то все селекты стали display: block, т. е несколько на одном уровне не расположишь (решается через css)
    2) в селекте проблема с короткими значениями, например 10,15,20,25, их не видно, раньше такой проблемы не было

  2. А как сделать комбобокс

    Комбинированный список

  3. у меня по-чему то все содержимое прячется, http://cs607919.vk.me/v607919585/f64/YAHHXqlk8zs.jpg (скрин)
    почему, не подскажете? и как это можна по править?

  4. Вопрос — если у select style='display:none;' - после применения Вашего плагина — он станивится видимым … как побороть?

  5. И еще — Ваш плагин не работает если на сайте используется FancyBox — есть идеи как побороть?

  6. плагин прекрасный, но есть одна не очень приятная особенность, хотелось бы каким-нибудь доп элементом убирать файл из input[type=file], если человек передумал. И еще, если выбрать файл, а потом еще раз нажать выбор файла и отменить, placeholder пропадает.

  7. Выложил новую версию (1.4.8).

  8. Доброго дня! Есть ли возможность настроить ваш чудесный плагин таким образом, что бы селект всегда выпадал только вниз, независимо от положения на старнице? Сейчас до середины видимой области страницы селект выкидывает список вверх, без поля поиска, а находясь ниже середины, вниз, что лучше настроить (в моем случае) по умолчанию.
    Спасибо.

  9. Обращался с вопросом о селекте выпадающем вверх (хотел настроить что бы выпадал только вниз) — вопрос снят. Просто изменил максимальную высоту ul в jq-selectbox__dropdown, и, для мох целей, все отлично. Спасибо. Очень все гибко.

  10. Уважаемый автор. Этим плагином пользуюсь еще со времен его отдельного существования плагина для селектов. Частенько приходилось немного его править под свои нужды (часть того что я когда-то делал уже реализована в плагине). Но вот почему вы решаете какой должен быть элемент (block или inline-block). Переназначить можно только через important. Было бы хорошо чтобы вы сделали просто дополнительный цсс файл где прописали эти стили и их с легкостью можно было менять.

    • Я делаю так потому, что оригинальный элемент тоже inline-block.

      • Я полностью согласен. Но у нас же не оригинальный селект :)
        к примеру если нужно изменить свойства оригинального селекта:

        select{
        display:block;
        }
        

        В вашем же случае:

        select{
        display:block!important;
        }
        

        Зато плагин работает из коробки и можно сразу его стилизовать. А то есть плагины к которым не подключил цсс и все, что-то делать с элементами проблемно.

  11. Спасибо за прекрасный плагин. Раньше он подглючивал на iPad, открывалась два меню (на сайте и на iPad), но сегодня обновился и все стало на 5+. Спасибо Вам!

  12. У меня отказывается работать Ваш селектор. Это из-за ajax. Как побороть?

    Вот тут.

    • Забыл добавить, что здесь Radio неправильно работают.

      Недавно столкнулся с проблемой: часть страницы обновляется через ajax. Обновленные селекты без стилизации.
      Вроде понятно, что нужно вызвать метод. styler () повторно. Но вот как отловить момент обновления элемента. Сам механизм обновления через ajax заложен в CMS. Туда лезть нехорошо.
      В результате нашел довольно таки простое решение — прописать вызов метода в глобальных настройках ajax запросов:

      jQuery.ajaxSetup ({complete: function (){jQuery («select»).styler (); }});

      Может кому пригодится…

      Тут уже кто-то писал, но я понятия не имею, куда это прописывать и решит ли это мою проблему. Может кто-то подсказать?

  13. Подскажите, есть ли возможность анимировано переключать чекбоксы, пробовал с transition и background-position что-то не выходит)

  14. Ширина select (а именно .jq-selectbox__select-text) рассчитывается по первому option, поэтому длинные option превращаются в три точки … Даже если указывать класс с шириной больше чем самый длинный option, все равно три точки. Но такое не всегда, иногда все нормально. И у Вас в примере тоже все ок, как так?

    <select>
    <option>шт</option>
    <option>упак.</option>
    </select>
    
  15. jQuery Form Styler v1.3.8.1
    На сайте запускается так:

    <script type="text/javascript">
    	jQuery(function(){				
    		$('select').styler();
    	});
    </script>

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

  16. просто применен шрифт OpenSans, и уже не лезет

  17. нажатие enter переключает чекбоксы, так не должно быть

  18. Объясните плз никак не могу понять
    есть 4 тега селект:

    <select #id="sel1"></select>
    <select #id="sel2"></select>
    <select #id="sel3"></select>
    <select #id="sel3"></select>

    Задаю в css епрвым двум ширину 400px, а вторым двух 600px

    .sel1,.sel2{width:400px}
    .sel3,.sel4{width:600px}

    Но ширина не менятеся, как исправить? чтобы у первых 2-ух была 400 а вторых двух 600 пикселей

  19. Добрый день Dimox.
    Пожалуйста помогите.
    У меня на странице фильтры которые обновляются на ajax.
    И получается так что после обновления чекбоксы и радио кнопки становятся простыми, как можно сделать что бы они постоянно обновлялись. Движок prestashop.

    Пробовал сделать вот так:

    (function($) {  
    $(function() {  
      $('input, select').styler(function(e) {  
        e.preventDefault();  
        $('input:checkbox').attr('disabled', true)  
          .trigger('refresh');  
      })  
      
    })  
    })(jQuery)  
    

    Не сработало

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