<optgroup>

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Тег <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>.

Демо ниже поможет понять, поддерживаются ли стили в вашем браузере и операционной системе. Если текст заголовка группы не красного цвета, а фон у него не жёлтый, то поддержки нет.

Открыть демо в новой вкладке