Стилизация чекбоксов, радиокнопок и прочих элементов с помощью jQuery Form Styler

Чекбоксы

без тега label


Радиокнопки

без тега label


Поле для выбора файла

Поле для ввода чисел

Поле без атрибутов.

Поле с атрибутами min="0" max="100" step="5".

Другой вид переключателей.

Одиночные селекты

По умолчанию ширина селекта на этой странице установлена 250 пикселей.

Простой селект с несколькими пунктами,
один из них неактивный.

Селект без заданной ширины, имеющий пункт с длинным текстом.



Селект с шириной 200 пикселей, имеющий пункт с длинным текстом.

Выпадающий список этого селекта
органичен по высоте.

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

Проверяем, правильное ли значение передается при изменении. У оригинального селекта прописано: onchange="alert(this.value)".

Селект с замещающим текстом (placeholder). Текст "-- Выберите --" задан не через тег option, а через атрибут data-placeholder.

Селект с группировкой пунктов
(используется тег optgroup), один из них неактивный.

Селект с выделением групп разными цветами (указаны классы .color1 и .color2 для optgroup).

Показываем, что селект изменен, используя класс .changed (появляется зеленая обводка).

Класс, указаннный для option, передается свернутом селекту, благодаря чему мы в нем видим флаг.











Мультиселекты

Мультиселект, один из пунктов неактивный,
параметр size не указан.

Мультиселект с параметром size равным 6 и с заданной шириной (400 пикселей).

Мультиселект с группировкой пунктов (используется тег optgroup), один из них неактивный.

Мультиселект с выделением групп разными цветами (указаны классы .color1 и .color2 для optgroup).

Прочие элементы форм (только CSS)

Стилизация данных элементов не требует наличия плагина.

<input type="text"> <input type="password"> <textarea></textarea>
<input type="button">
<button></button>
<input type="reset">
<input type="button" disabled>
<button disabled></button>