Главная 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. .jq-selectbox__select-text {
    display: block;
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    Если ширина блока переопределяется где-то через .jq-selectbox.width-xxx и при этом там используется !important
    (… ну мало-ли сколько там будет правил, перекрывающих друг-друга)

    .jq-selectbox.width-245 { width: 245px! important; }
    .jq-selectbox.width-120 { width: 120px! important; }

    то при длинном тексте width: 100% недостаточно — текст вылазит за пределы select’a

  2. Шикарный плагин! Спасибо!

  3. Добрый день.
    Спасибо за скрипт.
    Не работает демо тут:
    dimox.github.io/jQueryFormStyler/demo/

  4. Спасибо за такой замечательный плагин. Установил, настроил всё супер, но заметил один момент, что если я в select-е первый option делаю disabled то он не отображается (вернее отображается, но уже когда селект раскрывается). Отображается сразу следующий и так далее. Первый просто игнорируется. Может что не так делаю. Dimox подскажи плиз)

  5. Есть вопрос, можно ли будет, когда-то добавить в селект placeholder, ну например что он был виден, но когда открываешь, его в списке небыло, если ничего не выбрал и закрыл, он остался, но если чтото выбрал он конечно пропал. Чтото типа дефолтного текста в спане текст, например, если data-title у стандартного селекта указан из него брать етот текст, если нет то как раньше.

  6. Как правильно сделать width селекту? Или его размер ставится только в зависимости от самого широкого элемента?

  7. Такая вот штука. Понимаю что возможно стандартный селект и имеет такое поведение, но у нас же не стандартный.
    Этот селект работать не будет

    <select class="select b-odetalis__filter-dropdown">
         <option value="" class="b-odetalis__filter-dropdown-icon_g"></option>
         <option value="" class="b-odetalis__filter-dropdown-icon_mr"></option>
         <option value="" class="b-odetalis__filter-dropdown-icon_ym"></option>
    </select>
    

    Нужно чтобы option содержало хоть какой то текст.   те помогает

    <select class="select b-odetalis__filter-dropdown">
         <option value="" class="b-odetalis__filter-dropdown-icon_g">1</option>
         <option value="" class="b-odetalis__filter-dropdown-icon_mr">2</option>
         <option value="" class="b-odetalis__filter-dropdown-icon_ym">3</option>
    </select>
    
  8. Привет. Можешь подсказать, есть ли какой-то способ стилизовать скролбар в выпадающем списке селекта? вот как должно быть http://prntscr.com/365nmc

    заранее спасибо за ответ!

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

  10. Отличный плагин, часто пользуюсь, спасибо!

    Недавно столкнулся с такой багой — на айпадах/айфонах при выборе селекта, плагин не срабатывает, его дропдаун не открывается и, видимо, не добавляются нужные классы opened и changed, т.к. после выбора, селект не стилизуется в соответствии с ними. Вместо дропдауна вылезает нативный айпадовский селект.

  11. Странное поведение плагина.
    При клике, на элемент проверяю есть ли дочерние (отдельный объект взаимосвязей), если есть переключаю их тоже.

    Проблема в том что 2 раза. trigger ('refresh') срабатывает, а потом перестает, хотя по коду атрибут checked проставляется и убирается, а вот у div выше перестает появляться класс «checked».

    В чем может быть проблема?

    $(".target input:checkbox").change(function(event) {
        var _id = $(this).attr('element_id');
        if(!$.isEmptyObject(MAP[_id])) {
            var type = 'unselect';
            if($(this).prop("checked")) {
                type = 'select';
            }
            $(MAP[_id]).each(function(i, id) {
                if(type == 'select') {
                    $(".target input[element_id='" + id + "']").attr('checked', true).trigger('refresh');
                }
                else {
                    $(".target input[element_id='" + id + "']").removeAttr('checked').trigger('refresh');
                }
            });
        }
    });
    
    • Вот более пример чистый:

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8" />
      	<title>Примеры для плагина jQuery Form Styler</title>
      	<link href="demo.css" rel="stylesheet" />
      	<link href="../jquery.formstyler.css" rel="stylesheet" />
      	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      	<script src="../jquery.formstyler.js"></script>
      	<script>
      		(function($) {
      		$(function() {
      			$('input, select').styler();
      			$("#id1").change(function(event) {
      				var type = 'unselect';
      				if($(this).prop("checked")) {
      					type = 'select';
      				}
      				if(type == 'select') {
      					$("#id2").attr('checked', true).trigger('refresh');
      				}
      				else {
      					$("#id2").removeAttr('checked').trigger('refresh');
      				}
      			});
      		})
      		})(jQuery)
      	</script>
      </head>
      <body>
      <label><input type="checkbox" id="id1" /> неактивный чекбокс</label>
      <label><input type="checkbox" id="id2" /> неактивный чекбокс</label>
      </body>
      </html>
      
    • Мне сложно определить причину. Возможно, стоит заменить .attr ('checked', true) на .prop ('checked', true), а .removeAttr ('checked') на .prop ('checked', false).

    • Да, я был прав, мое решение работает.

  12. Добрый день. Подскажите, при динамическом создании элементов не срабатывает обработчик клика.
    screenshot.su/show.php?img=c38ea6ef616b934519032f0a9c65c496.jpg
    проблема с селектом 2. Селект работает до того, как покликать на чекбоксы 1. — после этого селект 2 перестает работать
    Триггер рефреш отрабатывает, но без толку
    посмотреть можно — www.e1точкаtbox24.ru/ - 71 строка кода в фаербаге

  13. Здравствуйте! Подскажите, что я не так делаю?

    В общем после загрузки файла, мне нужно обновить select, добавить туда option с именем файла который был только, что загружен. Консоль показывает, что option добавлен, а вот сам селект не обновляться.

    $('select').append('<option value="'+data['file_name']+'">'+data['file_name']+'</option>').trigger('refresh');
    
  14. Хороший плагин, но если уж взялись поддерживать формы вы хоть плейсхолдер добавьте в 9−8 ие нечего сложного в этом нет спасибо.

  15. Доброго дня. Спасибо за скрипт. Всё очень удобно и красиво. Помогите советом пожалуйста. Имею два разных выпадающих списка. Хотел бы их оформить по разному. Как это можно реализовать?

    Подскажите как прикрутить разные стили CSS.

  16. Доступна новая версия плагина — 1.5.

  17. Здравствуйте!
    Решила попробовать ваш чудесный плагин и вроде всё отлично, но почему-то стили для input’ов не применяются (Что я делаю не так?

    Вызываю так, как написано в статье выше:

        <script>  
        (function($) {  
        $(function() {  
          
          $('input, select').styler();  
          
        })  
        })(jQuery)  
        </script>  
  18. Добрый день. на ipad вообще не открываются селекты, в чем может быть причина?

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

    Спасибо за ваш труд.

    Возникла проблемка.

    Верстаю калькулятор (http://tk.bricrb.by/calc.html), вверху где Пункт отправки и Пункт назначения селект нормально отображается (при раскрытии), но когда идем дальше (ставим галочку Негабаритный груз, Нажимаем ссылку АВТОЭКСПЕДИРОВАНИЕ, ставим галочку От двери) селект при открытии некоректно отображается, а имеенто автоматом проставляет маленькую ширину эллементу

    element.style {
        bottom: auto;
        display: block;
        height: auto;
        left: 0;
        position: absolute;
        top: 33px;
        width: 12.2333px;
    }
    

    С чем это может быть связанно?

    P. S. в jq я пока нуб

  20. Мне кажется уже пора делать поиск по комментам или отдельный форум для вопросов и обсуждений. А вопрос у меня следующий: как задисейблить кнопку? Сделал как в примере

    $(this).attr('disabled','disabled');

    пробовал и тригер и рефреш и чет не работает. У кнопки то атрибут появился и она задисейблилась, но вот сама кнопка по прежнему нажимается. Подскажите как это сделать. Посмотреть пример можно здесь stryukov.net/info.php

    • Уберите с кнопки класc .styler и тогда увидите, что кнопка становится неактивной. Просто в jquery.formstyler.css отсутствуют стили для неактивной кнопки.

      А триггер рефреш здесь бесполезно использовать, т.к. плагин не трогает такие кнопки. Читайте внимательно, какие элементы стилизует плагин.

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