Главная 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. Помогите, пожалуйста! Как в тег option добавить иконку перед текстом? Если поставить background или: before на тег li, то работает, но у выбранного пункта иконка не меняется…

  2. Я дико извиняюсь, но я не поняk как прикрутить свои стили XD

  3. Помогите! Не могу разобраться, как сделать чтоб изначально select был раскрыт?!

  4. Даже на примере не работает кнопка сброса: dimox.github.io/jQueryFormStyler/demo/#css
    Хотя заявлено как достоинство, уберите и добавьте в недостатки или почините, пожалуйста.

  5. Тестила у себя тоже самое…

  6. Почему при выборе чего-то из списка, он не сохраняет что выбрано?

    Выбираю 100, применяю, при фильтрации сразу выводит в место того что выбрано, ставить Выберите число. Отключаю скрипт все работает!

    Пример в поле адрес блога.

    <select>Выберите число</select>
    <select>100</select>
    <select>200</select>
    <select>300</select>
    
  7. Приветствую.
    IE 11 неправильно формирует ширину блока с текстом (в нормальных браузерах все норм). Есть какие-то наработки под рукой, как это победить?
    saveimg.ru/pictures/13−02−17/bed0a4b4caa7a85d9feba647caf3ecc4.png

  8. Здравствуйте. Я отображаю с помощью placeholder название селекта. На ПК и Android нормально, а вот на iOS первый option (который пустой) тоже отображается. Есть ли решение данной проблемы? Или может есть возможность отображать стилизированный select и на iOS?

  9. Добрый день, подскажите как отключить авто height в дропдауне селект, выподает список с автовысотой и появляется прокрутка, я хочу отключить это.

  10. Добрый день.
    Как побороть такую ситуацию, даже на демке:

    1. На странице примеров поле выбора файла dimox.github.io/jQueryFormStyler/demo/#file
    2. Выбираешь файл, появляется имя файла.
    3. Нажимаешь кнопку «Переключить активность», все поля становятся неактивными и везде написано «Файл не выбран»
    4. Нажимаешь кнопку опять «Переключить активность», все поля активируется, но также надписи «Файл не выбран» (хотя судя по всему данные о файле в инпуте сохранились).
    5. Если в поле, где раньше был выбран файл выбираешь тот же самый файл, что и до деактивации, то в поле ничего не меняется, также написано «Файл не выбран».

    Видимо не обновляется в файловом инпуте данные о том, что-либо он очищен, либо что в нем есть после сброса какой-то файл добавленный ранее.

  11. Здравствуйте — подскажите пожалуйста как сбросить значение input type = «checkbox»?

    если использую этот код без плагина то все работает:

    $('#res_checbox').click(function() {
    	console.log("hola datevid");
    	$('.filtr_box_item input:checked').prop('checked', false);
    	if ($('.filtr_box_item input:checked').is(':checked')) {
    		console.log("App");
    	} else {
    		console.log("No App");
    	}
    });

    но если подключаю плагин то нет …

    если я чего-то не нашел в документации прошу подсказать.

  12. Здравствуйте. Есть проблема. Если использован атрибут дата таким образом — data-value-id, то скрипт отобразит его как data-valueid, т. е. обрежет второй —

  13. Подскажите пожалуйста как использовать .jq-selectbox .placeholder? Не могу убрать пункт [ - Все -]

  14. Не могу подключить плагин через require. Возвращает undefined

    require('jquery-form-styler')

    Как решить проблему?

  15. Скрипт классный, но, к сожалению, конфликтует с https://github.com/RobinHerbots/Inputmask на iphone ((Не могли бы вы проверить почему так происходит? Пожаааалуйста))

  16. Подключил версию 1.7.8 с jQuery 3.2.1. Наблюдаю странный глюк селекта, который находится в модальном окне fancybox 3 c iframe со стандартными параметрами и прелоадингом.
    Без дополнительных опций список выпадает только вверх, хотя вниз свободного места больше. Выпадает со скроллом (в моем случае видимы 3 опции), и не уходит за пределы iframe.
    При опции data-smart-positioning="false" список выпадает вниз. Но data-visible-options работает, только если выставить его меньше 5. Если ставлю 5 или больше — почему-то выпадает весь список без скролла, уходящий вниз за пределы iframe.
    При опции data-smart-positioning="-1″ data-visible-options работает нормально.
    Просто на странице селекты работают без глюков с любыми опциями.

  17. Да я и не прошу что-то сделать. Это не критично — просто мелкое неудобство. Комбинацией опций Вашего плагина и модального окна получил приемлемый результат, тем более — это в админке, красота не особо важна. Просто заметил, и написал — вдруг это Вам поможет в дальнейшем усовершенствовании плагина. Мне самому интересно стало, почему data-visible-options в этой ситуации при значениях от 1 до 4 работал, а при 5 и выше — нет. Но читать внимательно Ваш исходник пока времени не было.

  18. На айфоне и компьютере в Safari select не работает, у вас так же или проблема только у меня и в чем может быть причина? Заранее спасибо!

  19. Здравствуйте.
    Наблюдаю такой глюк. Установил на шаблон вордпресс + woocommerce
    В карточке товара при выборе параметра (вариантивный товар) не меняется цена.
    Причина точно в jQuery Form Styler (без него все работает корректно)
    Очень не хотелось бы переделывать.
    В чем может быть глюк?
    Сайт drvape.az

  20. Здравствуйте! Не устану повторять, насколько нравится мне Ваш плагин. Интересует такой вопрос по селекту с поиском. Предположим, я через jquery добавляю свой элемент в div. jq-selectbox__search. По клику на нем я хочу чистить input поиска. Используя $('input').val (''") поле очищается, но не возвращаются изначальные значения списка. Подскажите в какую сторону смотреть.

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