Использование цветного фона для меню, созданного с помощью элементов select
Ранее мы уже научились изменять фоновый цвет выпадающего меню в форме. Однако можно ли использовать разный фон для каждого пун- кта меню, чтобы выделить различные варианты выбора?
Решение
Чтобы различные пункты меню отображались в различных цветовых решениях, можно присвоить каждому из них различные классы. Для
пунктов меню можно изменять только значения свойств color и back- ground-color.
Safari не любит полоски. Помните, что Safari не поддерживает возможность задания фонового цвета для пунктов меню select, поэтому описанное реше- ние не будет работать в данном броузере.
Совет
Альтернативный вариант: использование селекторов атрибутов. Опять же вместо добавления классов в разметку можно воспользоваться селекто- рами атрибутов CSS. К примеру, вместо селектора option.blue можно было бы написать:
option[value=”blue”] { background-color: #ADD8E6; color: #000000;
}
В этом случае также не следует забывать об отсутствии поддержки данного селектора броузером Internet Explorer 6.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.