Как изменить вид тега OPTGROUP через стили?

🕛 23.01.2009, 00:25
Тег <OPTGROUP> используется для создания и выделения группы в списке, созданным через тег <SELECT>. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Браузеры по разному определяют стиль заголовка группы (рис. 1).


Применение стилей к селектору OPTGROUP меняет всю группу целиком, включая заголовок группы, причем допускается задавать только цвет текста (атрибут background) и фона (color). Чтобы выделить один заголовок, следует дополнительно задать стиль для селектора OPTION, входящего в группу (пример 1).

Пример 1. Изменение цвета текста и фона группы

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Группирование элементов списка</title> <style type="text/css"> OPTGROUP.color { background: #fc0; /* Цвет фона */ color: red; /* Цвет текста */ } OPTGROUP.hue { background: #f0f0f0; /* Цвет фона */ color: #000; /* Цвет текста */ } OPTION { color: #000; /* Цвет текста */ background: #fff; /* Цвет фона */ } </style> </head> <body> <form action="handler.php"> <p><select name="color"> <optgroup label="Цвет" class="color"> <option value="c1">Апельсиновый</option> <option value="c2">Лимонный</option> <option value="c3">Персиковый</option> </optgroup> <optgroup label="Тон" class="hue"> <option value="s1">Светлый</option> <option value="s2">Нормальный</option> <option value="s3">Темный</option> </optgroup> </select></p> <p><input type="submit" value="Отправить"></p> </form> </body>
</html>


В примере в списке имеется две группы с именами классов color и hue, для них устанавливается различный цвет текста и фона. Чтобы цвета элементов списка остались прежними, для селектора OPTION дополнительно вводится атрибут color и background.