Одиночные селекты
По умолчанию ширина селекта на этой странице установлена 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)