Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Тэг optgroup: Делаем нативные секции в селектах

  • Вещает
  • Опубликовано:
  • Изменено:
<optgroup>: Делаем нативные секции в селектах

В этой статье мы поговорим о непопулярной, но весьма полезной фиче для тэга <select>. Если быть точнее, о тэге для секций внутри него – <optgroup>.

С помощью него мы сможем визуально разделить <option> на нужные нам категории или разделы. Нативно, без кастомных решений и Javascript. Название секции не выделяется как пункт и становится полужирным, а все пункты внутри секции будут смещены вправо.

Атрибуты

Тэг <optgroup> имеет всего лишь два атрибуты:

  • disabled – Делает неактивной все пункты секции
  • label – Текст, который будет отображаться в названии секции

Реализация

Реализация довольно легкая – добавляем

<select>
  <optgroup label="HTML" disabled>
    <option>Pug</option>
    <option>Haml</option>
    <option>Markdown</option>
  </optgroup>
  <optgroup label="CSS">
    <option>SCSS</option>
    <option>Less</option>
    <option>PostCSS</option>
  </optgroup>
  <optgroup label="Javascript">
    <option>TypeScript</option>
    <option>Babel</option>
    <option>CoffeeScript</option>
  </optgroup>
</select>

Пример

«В бою» реализация кода выше работает так:

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

  • Относится к: HTML