Атрибут class тега <optgroup>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов для элемента <optgroup>, что дает возможность стилизовать группу опций в выпадающем списке.
<select>
<optgroup class="food-group premium" label="Фрукты">
<option>Яблоко</option>
<option>Апельсин</option>
</optgroup>
</select>
Основные возможности:
| Возможность | Описание | Пример |
|---|---|---|
| Один класс | Применение одного класса к группе | class="group-style" |
| Несколько классов | Применение нескольких классов через пробел | class="group-style special" |
| CSS-селекторы | Использование классов для стилизации | .food-group { font-weight: bold; } |
Пример стилизации через CSS:
<style>
.category-group {
font-weight: bold;
color: #2c3e50;
}
.premium-group {
color: #e67e22;
border-top: 1px solid #e67e22;
}
</style>
<select>
<optgroup class="category-group" label="Категории">
<option>Основные</option>
</optgroup>
<optgroup class="category-group premium-group" label="Премиум">
<option>Эксклюзив</option>
</optgroup>
</select>
Рекомендации по использованию:
- Используйте семантические имена классов, отражающие назначение
- Придерживайтесь единого стиля именования (BEM, kebab-case)
- Избегайте избыточного количества классов
- Для сложных стилей комбинируйте с другими селекторами
Ограничения браузеров:
- Стилизация
<optgroup>ограничена в некоторых браузерах - Не все CSS-свойства поддерживаются для элементов select/option
- Для кросс-браузерной стилизации рассмотрите кастомные решения
Пример с BEM-нотацией:
<style>
.select__group--food {
font-style: italic;
}
.select__group--food__label {
color: #27ae60;
}
</style>
<select class="select">
<optgroup class="select__group--food" label="Продукты">
<option>Хлеб</option>
</optgroup>
</select>
Примечание: Хотя атрибут class предоставляет гибкие возможности для стилизации групп опций, имейте в виду ограничения браузеров при работе с нативными элементами <select>. Для сложных дизайнерских решений рассмотрите использование кастомных dropdown-компонентов.