Главная › 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="radio"]

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

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

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

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

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

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

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

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

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

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

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

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

  1. Frantsuzzz
    9 лет 10 месяцев назад

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

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

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

    • Роман
      8 лет 2 месяца назад / ответ на коммент Frantsuzzz

      Спасибо, пригодилось)

      • Серега
        6 лет 7 месяцев назад / ответ на коммент Роман

        Спасибо, пригодилось!
        Самое интересное, что пробовал этот код вставлять в конце ajax запроса — не работало, а заработало, если в начале.

        Ну т. е. например:
        1. Так не работало
        onclick='my_function (); jQuery. ajaxSetup ({complete: function (){jQuery («select»).styler (); }}); '

        2. Так заработало
        onclick='jQuery.ajaxSetup ({complete: function (){jQuery («select»).styler (); }}); my_function ();'

        Если в коде, то соответственно, тоже в начале
        function my_function ()
        {
        jQuery.ajaxSetup ({complete: function (){jQuery («select»).styler (); }});

        … далее код

    • Елена
      4 года 7 месяцев назад / ответ на коммент Frantsuzzz

      Спасибо, это до сих пор работает, правда я другую библиотеку использовала для селектов

  2. astik
    9 лет 10 месяцев назад

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

    • Вячеслав
      9 лет 9 месяцев назад / ответ на коммент astik

      Не спорю все будет красиво и не так грузить браузер, но грошь цена верстке которая сейчас фигово смотрится в ИЕ8, увы, но такие реалии… к примеру Themeforrest уже отказался от поддержки ие8, а вот наши отечественные клиенты по прежнему считают что верстка под ие 8 показатель мастерства верстальщика и студии в целом отчасти с ними согласен. Бывают даже весельчаки которые просят ие 6))

      П.С. Автор спасибо за хороший плагин, очень кстати, все просто и доступно

  3. astik
    9 лет 10 месяцев назад

    Чтобы не быть голословным! Я сделал украшения чекбоксов и радио с помощью псевдоэлементов в CSS. Идея не моя, где-то видел, уже не помню. Делается так.
    Заключаем input в div и добавляем label:

     <div class="switch">
<input/>
<label></label></div>

    Далее в css прописываем:

    .switch {
    position: relative;
	display: inline-block;
	top: -2px;
	margin-right: 5px;
}

.switch input[type=checkbox],
.switch input[type=radio]
 {
    position: absolute;
	top: 3px;
	left: -4px;
	width: 30px;
	height: 20px;
	z-index: 100;
	opacity: 0;
	cursor: pointer;
}
.switch_layered label{
	
	width: 16px;
	height: 16px;
	border: 1px solid #888;
	background: #F6F6F6;
	box-shadow: 0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
}

.switch input:checked ~ label:before {
	
    display: block;
	content: "f00c";
	font-size: 16px;
	line-height: 18px;
	color: #30A720;
	font-family: FontAwesome;
}

    Я использовал FontAwesome для отмеченных чекбоксов, он работает только с: before

    Вот собственно и все. Стили, конечно, нужно поправить под конкретные нужды.
    Самое главное, нет проблем с обработкой onclick.

    Результат можно посмотреть у меня на сайте: http://pushpizza.ru/24-japan-menu

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

  4. Ivan
    9 лет 10 месяцев назад

    Использую плагин для стилизации select. При перезагрузке текущей страницы, select сохраняет выбранное ранее состояние. Как сделать чтобы он при перезагрузке страницы выбирал, как и положено, первый?

  5. Kerny
    9 лет 10 месяцев назад 
      <input type="reset" />

    Визуально не сбрасывает настройки формы, хотя должен, юзать Api?

  6. Dimox
    9 лет 10 месяцев назад

    Выложил новую версию плагина. Будет интересна тем, кто хотел поддержку плагинов валидации. Вот живой пример с использованием плагина jQuery Validation.

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

  7. Shimmy
    9 лет 10 месяцев назад

    Плагин замечательный, спасибо!
    Только у меня не получается применить его для селектов. Вот фрагмент кода:

    <html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
		<link rel="stylesheet" href="style.css" type="text/css" />
		<link rel="stylesheet" href="jquery.formstyler.css" type="text/css" />
		<script src="jquery-1.10.2.min.js"></script>
		<script src="jquery.formstyler.min.js"></script>  
		<script type="text/javascript">
			(function($) {
				$(function() {
				$('input, select').styler();
				})
			})(jQuery)
		</script>
		<title>title</title>
	</head>
	<body>
<select>
					<option>-- Выберите --</option>
					<option>Пункт 1</option>
					<option>Пункт 2</option>
					<option disabled>Пункт 3</option>
					<option>Пункт 4</option>
					<option>Пункт 5</option>
				</select>
        </body>
</html>

    С кнопкой, например, все получилось. Что я делаю не так?

  8. Константин
    9 лет 10 месяцев назад

    Понравился скрипт! Один нюанс. Было бы замечательно если selectbox обладал поиском по содержимому, так же как chosen. Надеюсь вы добавите функцию поиска! =)

  9. Александр
    9 лет 10 месяцев назад

    Здравствуй, не пойму где засада, сделал чекбокс «Выбрать все», но триггер работает лишь однажды на включение, в остальном только выключает все чекбоксы
    http://jsfiddle.net/57u3K/1/

  10. Dimox
    9 лет 9 месяцев назад

    Выложил новую версию плагина. Добавил поиск в одиночном селекте.

  11. Евгений
    9 лет 9 месяцев назад

    Во валидация заработала) теперь вообще нормуль. Спасибо.

  12. sdook1
    9 лет 9 месяцев назад

    Планируется ли доработка мультиселекта а-ля Bootstrap Multiselect или что-то подобное?

  13. Mitia
    9 лет 9 месяцев назад

    В версии плагина 1.4.6 не работает переключение радиокнопок в группе. После долгих мучений оказалось что если отсутствует обертка form, то кнопки не выключаются. В ранних версиях плагина было все хорошо :)

    • Dimox
      9 лет 9 месяцев назад / ответ на коммент Mitia

      Логично же, что элемент формы должен находиться в теге form.

      • Mitia
        9 лет 9 месяцев назад / ответ на коммент Dimox

        Чаще всего да. Однако допускается использовать любые элементы вне тэга form кроме

        input type=''submint"

        . Иногда это надо, например для пользовательского интерфейса. По крайней мере это требование надо отметить в примечаниях. Еще из пожеланий при неуказанной ширине селекта не учитывается ширина триггера-стрелки.
        А вообще спасибо за плагин очень классный!

        • ПафНутиЙ
          9 лет 9 месяцев назад / ответ на коммент Mitia

          Любой элемент можно использовать вне формы:

          <form id="data"></form>
<p><input placeholder="Ваше имя" name="user" form="data"></p>
<p><input type="submit" value="Отправить форму" form="data"></p>

          Тут уже как посмотреть, но в вашем случаи можно просто допилить скрипт под конкретный сайт:
          после

          selectSmartPositioning: true

          добавить:

          ,radioParent: 'form'

          А

          radio.closest('form')

          заменить на:

          radio.closest(opt.radioParent)

          Ну и при инициализации скрипта указывать нужный селектор

          $.styler({radioParent: '.element'})
        • Dimox
          9 лет 9 месяцев назад / ответ на коммент Mitia

          Еще из пожеланий при неуказанной ширине селекта не учитывается ширина триггера-стрелки.

          Она и не должна влиять на ширину селекта. Такое же поведение и у нестилизованного селекта.

  14. Илья
    9 лет 9 месяцев назад

    Установил плагин, но почему-то он работает только на поле «input type="file»
    Остальные поля не оформляются. В чём может быть проблема.

  15. Илья
    9 лет 9 месяцев назад

    Форма:

    <p>* поля обязательные к заполнению</p>
<div>[[+fi.error.error_message]]</div>
<form action="[[~[[*id]]]]" method="post"><input type="hidden" name="nospam:blank" value="" />
<div><label for="name">Имя: </label> <input id="name" type="text" name="name:required" value="[[+fi.name]]" /> <span>[[+fi.error.name]]</span></div>
<div><label for="name">Email: </label> <input id="email" type="text" name="email:email:required" value="[[+fi.email]]" /> <span>[[+fi.error.email]]</span></div>
<div><label for="subject">Тема вопроса: </label> <input id="subject" type="text" name="subject:required:stripTags" value="[[+fi.subject]]" /> <span>[[+fi.error.subject]]</span></div>
<div><label for="contact_attachment">Прикрепить файл: </label><em>(не обязательно)</em><br /> <input type="file" name="contact_attachment" value="[[!+fi.contact_attachment]]" /></div>
<div><label for="message">Текст вопроса: </label><span>[[+fi.error.message]]</span> <br /> <textarea id="message" name="message:required:stripTags" rows="7" cols="55">[[+fi.message]]</textarea></div>
<div><input type="submit" name="Submit" value="Отправить вопрос" /></div>
</form>

    Плагин:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="jquery.formstyler.css" rel="stylesheet" />
<script src=jquery.formstyler.js"></script>
	<script type="text/javascript">  
(function($) {  
$(function() {  
  
  $('input, select, textarea').styler();  
  
})  
})(jQuery)
    • Dimox
      9 лет 9 месяцев назад / ответ на коммент Илья

      Читайте внимательно вначале статьи, что стилизует данный плагин. Из этого списка в вашей форме есть только input[file], все верно стилизовалось.

      А текстовые поля и кнопки стилизуются путем добавления вручную класса .styler. Плагином они не стилизуются, тут чистый CSS.

  16. Роман
    9 лет 9 месяцев назад

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

  17. npofopr
    9 лет 9 месяцев назад

    А как плагин заставить работать с fancybox?
    Fancybox открывается, а select не стилизуется… Видимо стилизацию надо запускать только после открытия окна?

  18. Сергей
    9 лет 9 месяцев назад

    Имею проблему по ширине select. Она определяется всегда уже по ширине, чем требуется. То есть надпись режется (class jq-selectbox__select-text). Пришлось закоментировать в jquery.formstyler.js строку 376

    selectbox.width(el.outerWidth());

    Ширина определяется почти корректно и есть много глюков. Помогите выйти из тупика. Заранее благодарен.

  19. lena
    9 лет 9 месяцев назад

    Подскажите, пожалуйста, как быть.
    В коде файла jquery.formstyler.js — на чекбоксе есть событие onClick, например:
    checkbox. click (function () {
    if (!checkbox.is ('.disabled')) {
    if (el.is (':checked')) {
    el. prop ('checked', false);
    checkbox. removeClass ('checked');
    } else {
    el. prop ('checked', true);
    checkbox. addClass ('checked');
    }

    А у меня в чекбоксе прямо прописано, что на onClick происходит некое событие:

    <input class="checksel" type="checkbox" id="ck_" onClick="SelectOne(this.checked, )" />

    Этот клик не срабатывает.
    Какой можно найти выход из этой ситуации?

  20. Denis
    9 лет 9 месяцев назад

    В IE8 и ниже, виснет страница с одиночным select. Даже демо-страница «Одиночные селекты» dimox.github.io/jQueryFormStyler/demo/#select. Все остальные элементы работают.

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