Кратко
СкопированоТег <optgroup> позволяет группировать опции внутри элемента <select>. Внутри тега <optgroup> стандартно используется один или несколько тегов <option>.
Как пишется
СкопированоНельзя вкладывать один <optgroup> в другой.
Возможные атрибуты:
disabled— находящиеся внутри группы опции станут недоступны для выбора.
<select> <optgroup label="Необычные цветы" disabled> <option>Ангулоя одноцветковая</option> <option>Обезьяний дракула</option> <option>Пассифлора инкарнатная</option> </optgroup></select>
<select>
<optgroup label="Необычные цветы" disabled>
<option>Ангулоя одноцветковая</option>
<option>Обезьяний дракула</option>
<option>Пассифлора инкарнатная</option>
</optgroup>
</select>
label— обязательный атрибут. Имя группы будет отображено в выпадающем списке. Теоретически мы можем оставить атрибут пустым или не использовать его вообще, но в таком случае над списком будет пустое пространство.
Кроме того, можно применить любые глобальные атрибуты.
На практике
Скопированосоветует
Скопировано🛠 У тега <optgroup> не очень много вариантов стилизации, мы можем изменить фон и параметры текста. В зависимости от браузера и операционной системы стили работают по-разному. Или не работают вообще 😕
✅ — меняется, ⛔ — не меняется:
Windows
| Браузер | Текст | Фон |
|---|---|---|
| Chrome | ✅ | ✅ |
| Safari | ✅ | ✅ |
| Opera | ✅ | ✅ |
| Edge | ✅ | ✅ |
| Firefox | ✅ | ✅ |
| Yandex Browser | ✅ | ✅ |
В Safari и Firefox выделяется только заголовок, к остальному списку стили не применяются.
macOS
| Браузер | Текст | Фон |
|---|---|---|
| Chrome | ⛔ | ⛔ |
| Safari | ⛔ | ⛔ |
| Opera | ⛔ | ⛔ |
| Edge | ✅ | ✅ |
| Firefox | ✅ | ⛔ |
| Yandex Browser | ⛔ | ⛔ |
При этом, пока мы не выберем список, во всех браузерах и операционных системах он идёт стандартного серого цвета, для изменения стиля списка вам потребуется стилизовать тег <select>.
Демо ниже поможет понять, поддерживаются ли стили в вашем браузере и операционной системе. Если текст заголовка группы не оранжевого цвета, а фон у него не чёрный, то поддержки нет.
Читайте также
-
<select>Поле выбора значения из раскрывающегося списка.