Примеры для плагина jQuery Form Styler

Чекбоксы

без тега label


Радиокнопки

без тега label


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

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

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

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

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



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

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

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

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

Селект с группировкой пунктов
(используется тег 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="number">
<input type="button">
<button></button>
<input type="reset">
<input type="button" disabled>
<button disabled></button>