jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

Плагин jQuery Form Styler

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы:

  • флажок <input type="checkbox">;
  • переключатель <input type="radio">;
  • поле для выбора файла <input type="file">.
  • поле для ввода чисел <input type="number">.
  • раскрывающийся список <select>;

к содержанию ↑

Демонстрация работы плагина

Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS.

к содержанию ↑

Достоинства

  • Общее:

    • Простота оформления с помощью CSS.
    • При отключенном JavaScript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
    • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
    • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
    • Поддержка атрибутов checked, selected, disabled.
    • Атрибуты class, id, data-*, title, указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы (id передается с суффиксом, чтобы избежать дублирования).
    • Поддержка динамического добавления/изменения атрибутов class, id, data-*, title.
    • Поддержка сброса формы при нажатии на <input type="reset">.
    • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
    • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
    • Поддержка валидации HTML5.
    • Поддержка мультиязычности.
  • Для селектов:

    • Поддерживает атрибут multiple, т.е. позволяет выбирать несколько пунктов (мультиселект).
    • Поддерживает группировку элементов списка в селекте (тег <optgroup>).
    • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height, либо через опцию selectVisibleOptions).
    • Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
    • Поддержка поиска по пунктам одиночного селекта.
    • Поддержка замещающего текста (placeholder).
    • Автоматически подстраивает ширину, если она не указана.
    • Поддерживает прокрутку колесом мыши.
к содержанию ↑

Недостатки

  • При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

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

    Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.

  • В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.
к содержанию ↑

Скачать

Плагин «jQuery Form Styler»

Версия: 1.7.7 | Последнее обновление: 08.01.2016

Плагин на GitHub | Плагин в CDN jsDelivr

к содержанию ↑

Подключение плагина

Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

  1. Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head>:

    <link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
    
  2. Для активации плагина примените метод .styler к тегам, которые хотите стилизовать:

    (function($) {
    $(function() {
    
    	$('input, select').styler();
    
    });
    })(jQuery);
    
к содержанию ↑

Отключение плагина (метод destroy)

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy:

$('select').styler('destroy');
к содержанию ↑

Динамическое изменение

При динамическом изменении элементов формы необходимо запустить триггер refresh, например:

$('button').click(function(e) {
	e.preventDefault();
	/* делаем чекбокс неактивным */
	$('input:checkbox').attr('disabled', true)
		/* обновляем состояние псевдочекбокса */
		.trigger('refresh');
});

При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger('refresh') необходимо запускать, используя setTimeout, иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

$('form').validate({
	invalidHandler: function() {

		setTimeout(function() {
			$('input, select').trigger('refresh');
		}, 1)

	}
});
к содержанию ↑

Опции плагина

Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

ОпцияПо умолчаниюОписаниеdata-атрибут
idSuffix-stylerсуффикс к атрибуту id, передаваемому от стилизуемого элемента
filePlaceholderФайл не выбрантекст по умолчанию в поле выбора файла (когда файл не выбран)data-placeholder
fileBrowseОбзор...текст кнопки у поля для выбора файлаdata-browse
fileNumberВыбрано файлов: %sтекст после выбора нескольких файлов, вместо %s вставится числоdata-number
selectPlaceholderВыберите...замещающий текст (плейсхолдер) в одиночном селекте; отображается, если по умолчанию выбран первый пункт с отсутствующим текстом: <option></option>data-placeholder
selectSearchfalseпоказывать поисковое поле в одиночном селекте (true — да, false — нет)data-search
selectSearchLimit10минимальное количество пунктов одиночного селекта, при котором показывать поискdata-search-limit
selectSearchNotFoundСовпадений не найденотекст сообщения о том, что нет пунктов, удовлетворяющих поискуdata-search-not-found
selectSearchPlaceholderПоиск...текст по умолчанию в поисковом полеdata-search-placeholder
selectVisibleOptions0количество отображаемых пунктов списка в простом селекте без прокруткиdata-visible-options
singleSelectzIndex100уровень слоя с псевдоселектомdata-z-index
selectSmartPositioningtrueумное позиционирование для выпадающего списка селекта:
true — работает вверх и вниз
false — работает только вниз
'-1' — позиционирование отключено
data-smart-positioning
localeruтекущая локаль
localesанглийская локализациямассив локалей с переводом соответствующих опций, подробнее смотрите здесь
к содержанию ↑

Колбеки (callbacks)

НазваниеПо умолчаниюОписание
onSelectOpenedfunction() {}запускается при раскрытии списка селекта, целевой селект можно захватить через $(this)
onSelectClosedfunction() {}запускается при закрытии списка селекта, целевой селект можно захватить через $(this)
onFormStyledfunction() {}запускается после выполнения плагина

Пример использования:

$('input, select').styler({
	fileBrowse: 'Выбрать',
	singleSelectzIndex: '999',
	onSelectOpened: function() {
		// к открытому селекту добавляется красная обводка
		$(this).css('outline', '3px solid red');
	}
});
к содержанию ↑

Локализация

Плагин поддерживает многоязычность. Для этого используются опции locale и locales.

Пример локализации (английская по умолчанию включена в плагин):

$('input, select').styler({
	locale: 'en',
	locales: {
		'en': {
			filePlaceholder: 'No file selected',
			fileBrowse: 'Browse...',
			fileNumber: 'Selected files: %s',
			selectPlaceholder: 'Select...',
			selectSearchNotFound: 'No matches found',
			selectSearchPlaceholder: 'Search...'
		}
	},
});
к содержанию ↑

CSS-селекторы, используемые для оформления

Чекбокс
.jq-checkboxчекбокс по умолчанию
.jq-checkbox__divдополнительный вложенный тег
.jq-checkbox.checkedвыбранный чекбокс
.jq-checkbox.disabledнеактивный (недоступный для выбора) чекбокс
.jq-checkbox.focusedфокус на чекбоксе, когда нажата клавиша Tab
.jq-checkbox spanдополнительный вложенный тег
Радиокнопка
.jq-radioрадиокнопка по умолчанию
.jq-radio__divдополнительный вложенный тег
.jq-radio.checkedвыбранная радиокнопка
.jq-radio.disabledнеактивная (недоступная для выбора) радиокнопка
.jq-radio.focusedфокус на радиокнопке, когда нажата клавиша Tab
.jq-radio spanдополнительный вложенный тег
Поле для выбора файла
.jq-fileродительский контейнер
.jq-file.focusedфокус на поле
.jq-file.changedфайл выбран
.jq-file.disabledнеактивное поле
.jq-file__nameполе с именем файла
.jq-file__browseкнопка выбора файла
Поле для ввода чисел
.jq-numberродительский контейнер
.jq-number.focusedфокус на поле
.jq-number.disabledнеактивное поле
.jq-number__fieldобертка для поля ввода
.jq-number__spin.minusкнопка «минус»
.jq-number__spin.plusкнопка «плюс»
Селект (простой)
.jq-selectboxродительский контейнер
.jq-selectbox.openedвыпадающий список селекта раскрыт
.jq-selectbox.dropupвыпадающий список селекта раскрыт вверх
.jq-selectbox.dropdownвыпадающий список селекта раскрыт вниз
.jq-selectbox.changedвыбрано значение, отличное от заданного по умолчанию
.jq-selectbox__selectселект в свернутом состоянии
.focused .jq-selectbox__selectфокус на селекте, когда нажата клавиша Tab
.disabled .jq-selectbox__selectнеактивный (недоступный для выбора) селект
.jq-selectbox__select-textдополнительный вложенный тег для свернутого селекта
.jq-selectbox .placeholderзамещающий текст
.jq-selectbox__triggerправая часть свернутого селекта (условный переключатель)
.jq-selectbox__trigger-arrowвложенный тег для переключателя (стрелка)
.jq-selectbox__dropdownобертка для выпадающего списка
.jq-selectbox__searchобертка для поискового поля
.jq-selectbox__search inputпоисковое поле
.jq-selectbox__not-foundсообщение об отсутствии результатов поиска
.jq-selectbox ulвыпадающий список
.jq-selectbox liпункт (опция) селекта
.jq-selectbox li.selectedвыбранный пункт селекта
.jq-selectbox li.disabledнеактивный (недоступный для выбора) пункт селекта
.jq-selectbox li.optgroupзаголовок для группы пунктов
.jq-selectbox li.optionпункт списка в группе
Селект (множественный)
.jq-select-multipleродительский контейнер
.jq-select-multiple.disabledнеактивный (недоступный для выбора) селект
.jq-select-multiple liпункт (опция) селекта
.jq-select-multiple li.selectedвыбранный пункт селекта
.jq-select-multiple li.disabledнеактивный (недоступный для выбора) пункт селекта
.jq-select-multiple li.optgroupзаголовок для группы пунктов
.jq-select-multiple li.optionпункт списка в группе
Прочие элементы (только CSS)
.stylerкласс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)
к содержанию ↑

История изменений

Находится здесь.

к содержанию ↑

Стилизация без плагина

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

к содержанию ↑

Примеры различных решений

Полезные комментарии (12)
Комментарии (2 222)
  1. 1
    Дарья

    Добрый день!
    Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?
    Проблема в том, в select’е не работает аттрибут data-placeholder.

    Пробовала по-разному:
    c data-placholder и пустым первым option (последний ответ Zack Jordan)
    только с data-placeholder (как в доках)
    Оба варианта не работают.

    В первом случае (с пустым option) при загрузке страницы вместо подсказки — пустое поле, и оно отображается в выпадающем списке (при этом текст внутри div.jq-selectbox__select-text пустой и класс placeholder к этому div’у не применился).

    Во втором — вместо подсказки выводится первый элемент из options select’а (он же внутри div.jq-selectbox__select-text, и класс placeholder тоже не применился).

    Вот пример использования:

    <select data-placeholder="Выберите регион" class="..." id='location' name="{{ form.location.html_name }}">
     <option></option> <!-- Во втором варианте без этой строки -->
     {% for id, name in form.location.field.choices %}
     <option value="{{ id }}"{% if form.location==id" %} selected{% endif %}>{{ name }}</option>
     {% endfor %}
    </select>
    

    Интересно что, для самого простого примера, без тегов джанги, также не работает.

    • 2

      На странице примеров все работает, значит причина где-то у вас. И непонятно, при чем здесь плагин chosen, ссылки на который вы даете.

      Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?

      Не знаю, я не знаком с Django.

  2. 3

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

  3. 7
    shaman

    проблемка такая:

    есть страничка с кодом

    Выбрать
    111
    222
    333

    111
    222

    На новой html страничке все работает, а вот как с вашим плагином получить доступ к (option value=»1″) чтобы установить ему атрибут (‘selected’,’selected’)»

    Заранее благодарен )

  4. 8
    shaman

    Извиняюсь, пока разбирался, как добавить код странички, он уже добавился. Но сам код так и не видно (

  5. 10
    Александр

    Здравствуйте, при динамическом select’е когда подгружается зависимый select изменяется его ширина, становится равная самому длинному пункту.
    Указываю $(«#subcategory»).css({‘min-width’:’337px’, ‘max-width’:’337px’}) не работает.

  6. 15
    Дмитрий

    У меня селект в Хедере, соответственно распространяется влияние на селекты на страницах. Как защитить другие селекты от изменений?

  7. 17
    Kenny

    С версией жиквери 3.1.1 селект изначально открывается вверх. Пробовал версию 2.1.1 — все норм. Как исправить?

  8. 20
    Вячеслав

    Можно ли запретить обработку отдельных элементов этим плагином? Например, добавив класс jq-disable?

  9. 22
    Александр

    Мобильные устройства не поддерживаются?

  10. 24
    Slava

    Возникла небольшая проблема с селектами. Когда подключаю плагин, то selected значение не передается в POST-запрос. Если пинговать селект alert’ом при событии onchange то значение показывается правильно. Если же убрать кастомизацию селекта, то значения в POST передаются нормально.
    Подскажите, пожалуйста, в какую сторону копать, второй день уже борюсь с этим багом.

  11. 25
    Александр

    Здравствуйте люди добрые! Нужна помощь! Не могу разобраться как подключить плагин к связанным динамическим селектам. Прочитал все комменты от корки до корки испробовал все советы но видимо делаю что то не так. Есть три селекта. При загрузке страницы плагин подключается и работает.. но при изменении первого второй селект принимает стиль по умолчанию. Пробовал вставить в скрипт вот это jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }}); но срабатывает только при повторном нажатии на первый селект.
    Вот пример моего кривого кода..
    Sect.php

     <script language="javascript">
    var request;
    var dest;
     
    function processStateChange(){
     if (request.readyState == 4){
     contentDiv = document.getElementById(dest);
     if (request.status == 200){
    response = request.responseText;
    contentDiv.innerHTML = response;
     } else {
    contentDiv.innerHTML = "Error: Status "+request.status;
     }
     }
    }
     
    function loadHTML(URL, destination){
     dest = destination;
     
     if (window.XMLHttpRequest){
     request = new XMLHttpRequest();
     request.onreadystatechange = processStateChange;
     request.open("GET", URL, true);
     request.send(null);
     } else if (window.ActiveXObject){
     request = new ActiveXObject("Microsoft.XMLHTTP");
     if (request) {
    request.onreadystatechange = processStateChange;
    request.open("GET", URL, true);
    request.send();
     }
     }
    }
    
    </script>
    <script>
    (function($) {
    $(function() {
    
     $('input, select').styler();
    
    });
    })(jQuery);
    </script>
    
    <? CModule::IncludeModule("iblock");
     
     $IBLOCK_ID=8;
     $str = "";
     $str .= "<select class=\"sort-list-select1\" name=\"SECTION_ID\" id=\"q1\" onchange=\"loadHTML('/structura/ajax.php?id='+this.options[this.selectedIndex].value,'label');\" >";
     $str .="<option>Выбор марки</option>";
     
     $arFilter = Array('IBLOCK_ID'=>$IBLOCK_ID, "DEPTH_LEVEL" => 1, 'GLOBAL_ACTIVE'=>'Y');
     $db_list = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter, true);
     while($ar_result = $db_list->GetNext())
     {
     $str .= "<option value=\"".$ar_result['ID'] ."\">".$ar_result['NAME']."</option>"; 
     }
    ?>
    <div class="sort-form">
    
    <form>
     <table class="sort-list-table">
     <tbody><tr>
     <td>Выберите мотоцикл</td>
     <td><?=$str?></td>
     <td>
     <div id="label">
     <select id="q2" class="sort-list-select2" name="element">
     <option value="empty">Выбор объёма</option>
     </select><div>
     </div></div></td>
     <td>
     <div id="label3">
     <select id="q3" class="sort-list-select3" name="element3">
     <option value="empty3">Выбор модели</option>
     </select>
     <div>
     </div></div></td>
     </tr>
     
     </tbody></table>
    </form>
    
    </div><br> 

    Файл ajax.php

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    
    
    
    
     <? CModule::IncludeModule("iblock");?>
    <?
    $IBLOCK_ID=8;
    
     $arSelect = Array("ID", "NAME","IBLOCK_SECTION_ID");
     $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 2, "ACTIVE_DATE"=>"Y", "SECTION_ID"=>$_GET["id"]);
     $res = CIBlockSection::GetList(Array("sort" => "asc"), $arFilter, true);
     
     $arResult = "<select class=\"sort-list-select1\" name=\"element\" id=\"q2\" onchange=\"loadHTML('/structura/ajax1.php?id='+this.options[this.selectedIndex].value,'label3');\" >";
     $arResult .="<option value=\"empty\">Выбрать объём</option>";
     
     
     while($ob = $res->GetNextElement())
     {
     $arFields = $ob->GetFields();
     $arResult .= "<option value=".$arFields ['ID'].">".$arFields ['NAME']."</option>"; 
     }
     $arResult .="</select>"; 
    
    echo $arResult;
    
    
    ?>
    
    
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

    файл ajax1.php

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    
    
    
    <?CModule::IncludeModule("iblock");?>
    <?
    $IBLOCK_ID=8;
    
     $arSelect3 = Array("ID", "NAME","IBLOCK_SECTION_ID");
     $arFilter3 = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 3, "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y", "SECTION_ID"=>$_GET["id"]);
     $res3 = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter3, true);
     
     $arResult3 = "<select class=\"sort-list-select1\" name=\"element3\" onchange=\"window.location.href=this.options[this.selectedIndex].value\">";
     $arResult3 .="<option value=\"empty3\">Выбрать модель</option>";
     
     while($ob3 = $res3->GetNextElement())
     {
     $arFields3 = $ob3->GetFields();
    	 
     $arResult3 .= "<option value=".$arFields3 ['SECTION_PAGE_URL'].">".$arFields3 ['NAME']."</option>"; 
     }
     $arResult3 .="</select>"; 
    
    echo $arResult3;
    
    ?>
    
    
    
    
    
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>
  12. 26

    Привет. Спасибо за плагин, пользуюсь давно и очень доволен.
    Недавно написал модуль для друпала, который позволяет подключать твой плагин к любому сайту на этой CMS. Вот ссылка на него https://www.drupal.org/project/form_styler при установке модуля, плагин скачивается с твоего репозитория. Можешь в описании добавить ссылку на модуль. Настройки опций плагина из админки Drupal-а в работе. Выгружу как завершу и протестирую. Еще раз спасибо за плагин и свободную лицензию =)

  13. 27
    Андрей

    Добрый день, подскажите такой момент по плагину… Если выбирать из выпадающего списка значение, то свойство $(this).val() доступно и не пустое, но если в дропдауне больше 400 значений, естественно хочется воспользоваться поиском. И вот когда в поисковом поле после ввода 3-4 символов остаются нужные значения (например, города), ты кликаешь по нужному пункту и $(this).val() пусто!!! Потому что у в списке нет никаких аттрибутов. Вопрос — как в «поисковом поле» дропдауна при выборе получать не пустое значение. Смысл же select’a в том, чтоб значение куда-то отправить или сохранить, а не для красоты. Спасибо

    • 28

      Только что проверил на странице примеров, где вариант с onchange="alert(this.value)". Добавил туда много пунктов, ввожу символы в поиске, после клика на пункт он мне показывает alert. Не знаю, что не так у вас.

      • 29
        Андрей

        Добрый день, оставьте onchange на дропдауне и попробуйте из множества пунктов найти определенный и кликнуть на нем — алерта вообще не будет. А если просто проскролить до нужного и выбрать пункт, то алерт и у меня срабатывает. Интересует почему в поиске пустое значение.

          • 31
            Андрей

            Похоже, вы правы, у меня на локальной машине тоже в обоих, значит фреймворк Yii что-то «портит» или перекрывает(( не срабатывает какое-то событие в фильтрах CGridView! Если кто-то это читает и сталкивался — подскажите, пожалуйста :) спасибо

          • 32
            Максим

            Встретился со схожей проблемой, возможно как-то неправильно используете js, вот пример разбора ошибки:

            <select class="js-calculator__type">
            $(document).ready(function(){
             //селектор для select-а
             var $classSelector = $('.js-calculator__type');
            
             //какой-то произвольный DOM-элемент
             var $custom = $('.custom-selector');
            
             //событие которое использует $classSelector.val()
             $custom.on('custom-event', function(){
             console.log($classSelector.val());
             });
             //но в $classSelector 2 элемента
             //первый - обертка для SELECT-а
             //второй - сам SELECT
             //$classSelector.val() - берет value первого элемента из набора
             //поэтому
             //или изначально пишем селекторы как-то так
             $classSelector = $('select.js-calculator__type');
             //или
             $classSelector = $('.js-calculator__type').not('jq-selectbox');
             //или проверяем элемент набора перед тем как брать его val()
             
            });
            
  14. 33
    Евгений

    Подскажите пожалуйста! Поставил плагин стилизации селектов и в форме регистрации перестал открываться селект с выбором региона, в остальных местах везде работает. Через консоль пишет TypeError: jQuery(…).ready(…) is not a function , как исправить эту проблему?

  15. 34
    Anrew

    Подскажите, а как можно повесить раскрытие селекта при клике по ссылке или какому нибудь label?

  16. 35
    Diana

    Здравствуйте, хотела бы узнать, етсь ли поддержк tabindex?

  1. 1

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

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

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

  2. 2
    Роман

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

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

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

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

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

  4. 4

    Можно.

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

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

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

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

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

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

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

  8. 8

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

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  9. 9
    Фарит
    		(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, стилезуйте на свой вкус.

  10. 10

    Посмотрите, какой у вас общий родительский тег для этих инпутов, и укажите его в опции wrapper.

    Пример:

    <div class="radio-buttons">
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    </div>
    
    $('input:radio').styler({
    	wrapper: 'div.radio-buttons'
    })
    
  11. 11
    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.

  12. 12

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

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });