Главная › JavaScript

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

2614 комментариев

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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Смотрите также

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type=

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

Комментарии (2 614)

  1. Dinar
    8 лет 1 месяц назад

    скроллбар еще бы кастомизировать, ваще клево будет

  2. Александр
    8 лет 1 месяц назад

    Подскажите как пользоваться дата-атрибутами, к примеру что в раскрывающемся списке появилось поле поиска

      • Александр
        8 лет 1 месяц назад / ответ на коммент Dimox 
        <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../form/jquery.formstyler.css">
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../form/jquery.formstyler.min.js"></script>
<script>(function($) {
$(function() {

  $('select').styler();
  $('input').attr('class','styler');

});
})(jQuery);</script>


</head>
<body>
<select data-search="true">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
	<option value="5">Option 5</option>
</select>
<input type="text"></input>

</body>
</html>

        Вот такой код сделал и поле поиска не появляется, подскажите как сдлелать

        • Александр
          8 лет 1 месяц назад / ответ на коммент Александр 
          <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../form/jquery.formstyler.css">
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../form/jquery.formstyler.min.js"></script>
<script>
$(function() {
  $('select').styler({selectSearch:true, selectSearchLimit:5});
  $('input').attr('class','styler');
});
</script>


</head>
<body>
<select data-search="true">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
	<option value="5">Option 5</option>
</select>
<input type="text"></input>

</body>
</html>

          Все разобрался, заработало!!!

          • Dimox
            8 лет 1 месяц назад / ответ на коммент Александр

            Поскольку уже указано selectSearch:true, то data-search="true" не нужно.

            • Евгений
              8 лет 1 месяц назад / ответ на коммент Dimox

              Здравствуйте ! Я сам первый сайт делаю верней магазин, и не как не могу добавить размер к товару, чтоб покупатель мог по клику выбрать нужны размер. А при добавлении атребута просто отображаются как надпись. Думаю дело в шаблоне, а вот как справится третий день сижу и неразберусь !? Что сделать нужно. Плиз помогите!

  3. Юрий
    8 лет назад

    Здравствуйте, спасибо за прекрасный плагин, а как можно отключить в Android стилизацию выпадающего и оставить стандартный нативный выпадающий как в обычном селекте, заранее спасибо!

    • Dimox
      8 лет назад / ответ на коммент Юрий

      Только изменением кода плагина.

      • Юрий
        8 лет назад / ответ на коммент Dimox

        Можете хоть подсказку дать, посмотрел код особо не разобрался. Попробовал сделать так же как и для IOS, но не сработало.

        Где идет обход? Единственное что нашел это:

        // если iOS, то не показываем выпадающий список,
// т.к. отображается нативный и неизвестно, как его спрятать
if (iOS) return;
Выставил: if (Android || iOS) return;

        Теперь в Android выпадающий перестал работать, а как же включить обычный нативный

  4. styler user
    8 лет назад

    Подскажите пожалуйста как скрыть нативный селект на IOS, чтобы отображались стилизованные пункты dropdown.

  5. osben
    8 лет назад

    Скажите, я что-то упустил. События типа change не всплывают?

    	$('.styler').styler();
	$(document).on('change', '[name^="amounts"]', function(event) {
		event.preventDefault();
		alert();
	});

    <input name="amounts" class="styler" type="number" min="1" max="10" step="1" value="4"/>
  6. Антон
    8 лет назад

    Как сделать что бы к определенному selecty не применялось оформление?

  7. Николай
    8 лет назад

    Не понимаю почему, но при инициализации элемента при загрузку странице, все работает ок. А когда контент загружается ajax-ом, а потом запускается инициализации, то выпадающий список получает ширину в 21px вместо нормально.

    <div class="jq-selectbox__dropdown" style="position: absolute; width: 21.8182px; left: 0px; top: auto; display: block; height: auto; bottom: auto;">

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

  8. Anton
    8 лет назад

    Как для отловить изменение value когда меняют кнопками ±

  9. Доминатор
    8 лет назад

    Не срабатывает клик на сафари ios !!! не открывается список!!!
    alfabank.by/

  10. Сергей
    8 лет назад

    С какого-то момента, не можем определить точно, на строку $('select').styler (); стала выдаваться ошибка, после чего весь последующий скрипт перестает работать. Пока сделали

     
if ( $('select').styler == 'function' ) {
      $('select').styler();
    }

    Скрипт в целом начал работать, но select-ы стали стандартными. Используем версию jQuery Form Styler v1.7.4

    Вызов styler () производится в файле scripts.js. Используются следующие скрипты:

    jquery-1.11.3.min.js
    jquery-cookie-1.4.1.min.js
    bootstrap.min.js
    jquery.formstyler.js
    jquery.pickmeup.min.js
    jquery.magnific-popup.min.js
    jquery.maskedinput.js
    jquery.md5.js
    scripts.js

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

  11. Юлия
    8 лет -1 месяц назад

    Я добавляю опцию selectSmartPositioning: true, хоть она и должна работать по дефолту, но селект открывается только вниз, на странице ваших примеров я тоже не увидела позиционирования, может я не понимаю как оно должно работать. Спасибо за ответ

  12. Антон
    8 лет -1 месяц назад

    …

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

  13. Роман
    8 лет -1 месяц назад

    Приветствую! Не наблюдалось такой проблемы, что в дуэте с плагином опросов от камы, form-styler перестает работать, если в плагине камы включить опцию → Включить механихм работы с плагинами кэширования. Может быть есть решение?
    Использую input type="radio".

  14. Андрей
    8 лет -1 месяц назад

    Здравствуйте! Скажите как сбросить селект к дефолтному (первоначальному) значению?

    $('select').val('');
$('select').prop('selectedIndex',0);

    Все это не работает. Точнее работает, только список ul с li элементами не переключается.
    Может эта тема уже всплывала? Дайте тогда ссылку. Спасибо

  15. sarkis
    8 лет -1 месяц назад

    Здравствуйте. Подскажите. как можно решить проблему: в момент перезагрузки страницы или при переходе отображается стандартный селект, а как только документ готов, то ваш скрипт срабатывает. Это все происходит за долю секунды, но иногда заметно

  16. vasaeps3
    8 лет -1 месяц назад

    Скрипт крутой. Очень нравится. Но есть баг

    Поддерживает «умное позиционирование», т. е. не уходит за видимую часть страницы при открытии списка.

    В chrome не отрабатывает. В ff отрабатывает на ура.
    Как полечить?

  17. Сергей
    7 лет 11 месяцев назад

    Здравствуйте! Прекрасный и легкий плагин)
    У меня только один вопрос: я хочу сделать в select пункты с иконками. Первое, что приходит на ум — динамическое добавление стиля к каждому пункту.
    Только как это реализовать, не подскажите?

  18. Владимир
    7 лет 11 месяцев назад

    Добрый день! Подскажите пожалуйста есть ли возможность НЕ уходить в отрицательные значения?

  19. Виктор
    7 лет 11 месяцев назад

    Добрый день! Скажите пожалуйста, исправлена ли проблема с selectSmartPositioning?

  20. Дмитрий
    7 лет 10 месяцев назад

    А почему в IE 11 чекбокс срабатывает только по двойному клику? Причем если кликать на label то работает нормально.

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