Главная 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. Спасибо большое! Прекрасный скрипт

  2. Dimox, супер! + за подробное описание, даже css-селеторы указаны что для чего. Огромное спасибо и удачи!

  3. Подскажите, а текстовые инпуты не стилизирует?

  4. Здравствуйте
    Не добавляется класс при фокусе. Проверил на Вашей демонстрационной странице. Там аналогично не добавляется класс.

  5. Еще дополнение.
    Плагин не берет класс с селекта. Например я хочу два разных селекта. Дописал класс селекту и плагин уже дописал этот класс span.selectbox.

  6. У меня на странице несколько селекторов, после подключения данного плагина идёт применение только к первому идущему в структуре, остальные игнорятся.
    Следует активировать плагин для каждого имеющегося селектора на странице или есть более лаконичное решение?

  7. Спасибо за очень хороший плагин! Но у меня возникло пожелание, или даже скорее просьба добавить скролл в селект с возможность изменения его дизайна. Заранее благодарен.

  8. Здравствуйте! Плагин понравился очень, но есть одно неудобство у селекта, может это как-то настраивается:
    Допустим, прогружается select, у один из последних пунктов (при их большом количестве) выбран по умолчанию. Когда раскрываем список, то чтобы понять какой пункт выбран, приходится листать вручную, а у стандартного позиционирование сразу стоит как надо.
    Как можно это настроить?

  9. Может суммировать высоту блоков (пунктов списка) пока не встретится выбранный элемент, а потом прокрутить список примерно на это расстояние?
    Самому мне в чужом коде не разобраться, слишком долго проплюхаюсь (

  10. Было бы супер, если получится=) Плагин этот много где нужен, но вот эту часть бы только допилить.
    А ещё вопрос такой: а есть в этом плагине selectbox с автофильтром (автоматически фильтрует список по введенным буквам)?

  11. Здравствуйте!
    Плагин просто отличный, но столкнулся с такой проблемой: когда выбран один из вариантов селекта, то не получается сбросить атрибут selected и назначить его первому элементу например через событие onclick какой то ссылки например.

    Т. е.

    <a href="#" onclick="resetselect(); return false;">Сбросить select</a>
    function resetselect() {
       $('#myselect option:first').attr('selected','selected');
    };
    

    Подскажите пожалуйста как решить данную проблему? Заранее спасибо!

  12. Не могу не заметить что стиль «позаимствован» с Twitter Bootstrap. Или это он и есть?) Нехорошо тогда, нужно разрешение спрашивать)

  13. Возникла проблема с input file в IE 8−9 (скорее всего проблема есть и в более ранних версиях). При загрузке файла через обновленный input, файл на сервер не пересылается. В других браузерах такой проблемы нет.

    Почитал комментарии, но не нашел решения. Конечно, может что-то упустил :)

  14. Нашёл проблему с firefox, наблюдаю только там версия FF 17.0.1
    Версия плагина Версия: 1.2.1
    Проблема возникает при добавлении атрибута selected к первому элементу option потом когда я выбираю другие пункты из списка мне всё равно передаётся value первого пункта, хотя визуально выбирается другой пункт.
    Если атрибут selected назначить не первому элементу option проблемы не будет наблюдаться.
    Проблема уходит если выбрать Пункт 2, а потом Пункт1, всё после этого всё работает, как надо

    Ссылка для теста
    http://playnonstop.net/files/select/dimox-select-problem.html

    Код для теста

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Примеры к статье</title>
    	<link href="jquery.formstyler.css" rel="stylesheet" />
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    	<script src="jquery.formstyler.min.js"></script>
    	<script>
    	(function($) {
    	$(function() {
    	$('select').styler();
    	})
    	})(jQuery)
    	</script>
    	<style>
    	* {
    	margin: 0;
    	padding: 0;
    	}
    	</style>
    </head>
    
    <body>
    
    <p>
     <select id="cat_name_id" onchange="selectFunction(this)" name ="cat_name">
        <option selected value="1">Item 1</option>
        <option  value="2">Item 2</option>
        <option  value="3">Item 3</option>  
    </select>
    </p>
    
    <script>
       function selectFunction(myOption) {
           alert("value = " + myOption.value);
        }	
    </script>
    
    </body>
    </html>
    
    • Ранее уже сообщали об этой проблеме. Я вносил правки, казалось, что проблема решена (по крайней мере по тестируемому в тот момент примеру она решилась), а оказывается нет. Нелогичное поведение Firefox. Единственное решение, которое я пока вижу — не ставить первому пункту атрибут selected.

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

    • По-моему, нашел решение. Еще немного потестирую, чтобы убедиться, что все действительно правильно, и выложу новую версию.

  15. Не работает плагин при использовании с плагином fancybox.
    Делаю форму заказа.
    popup — делаю через fancybox, внутри же элементы, среди которых

    <select class="sel_dimox">
    							<option value="1">Пакет Базовый</option>
    							<option value="2">Пакет Оптимальный</option>
    							<option value="3">Пакет Элит</option>
    						</select>

    То есть, если использовать отдельно на странице все работает, если внутри fancybox то печалька ((

  16. Выложил новую версию плагина — 1.2.2

  17. Как ограничить количество пунктов выпадающего списка SELECT? А лучше всего выписать все возможные настройки для данного плагина выше вместе с описанием

  18. Немного надо доработать, чтоб цеплял позицию width у самого select.
    Чтоб длина самого бокса, совпадала с длиной выпадающего списка.

    Не удобно прописывать.

    .CLASS .selectbox .select{
         width: YYpx;
    }
    

    Тем более, если учесть момент, что в данном случае, width самого бокса изменится, а длину выпадающего надо дописывать.
    С одной стороны легче дописать ф-ю и не перегружать CSS.

  19. Добрый день. Делаю сайт с каталогом спортивных событий — вот ссылка. Пытаюсь подключить ваш код, но применяется он только для первого селекта из трех, комменты все прочитал, видел две подобных проблемыЮ не знаю помогли ли им ваши ответы, но мне не помогли.

    Вызываю как вы и говорили код

    (function($) {
    		$(function() {
    
    			$('select').styler();
    
    		})
    		})(jQuery)

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

  20. Спасибо за плагин. У меня есть просьба к элементу с классом. selectbox прикрутить присвоение какого-нибудь класса. selected, когда. dropdown в значении display: block В стилизации селекта бы очень помогло.

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