Приднестровская поддержка XOOPS
Ранее мы уже научились изменять фоновый цвет выпадающего меню в форме. Однако можно ли использовать разный фон для каждого пункта меню, чтобы выделить различные варианты выбора?
Решение
Чтобы различные пункты меню отображались в различных цветовых решениях, можно присвоить каждому из них различные классы. Для пунктов меню можно изменять только значения свойств color и background-
color.
Ниже представлен необходимый код:
<form method="post" action="example8.html">
<div>
<label for="color">Выберите ваш любимый цвет:</label>
<select name="color" id="color">
<option value="">Выбор</option>
<option value="blue" class="blue">синий</option>
<option value="red" class="red">красный</option>
<option value="green" class="green">зеленый</option>
<option value="yellow" class="yellow">желтый</option>
</select>
</div>
<div>
<input type="submit" name="btnSubmit" id="btnSubmit"
value="Отправить!" class="btn" />
</div>
</form>
option.blue { background-color: #0000FF; color: #FFFFFF; } option.red { background-color: #E20A0A; color: #ffffff; } option.green { background-color: #3CB371; color: #ffffff; } option.yellow { background-color: #FFF280; color: #000000; }
Теперь меню выбора цвета, изображенное на рис. 6.14, действительно выглядит очень красочным.
Рис. 6.14. Результат присваивания классов различным пунктам меню select при просмотре документа в броузере Firefox
Обсуждение
Как правило, в CSS-коде следует избегать имен класса, связанных с определенным для них стилем. К примеру, назвать класс именем blue (синий) – не самое удачное решение, поскольку в дальнейшем вы можете изменить параметры цвета в определенном для него стиле. В итоге вы получите множество заголовков класса blue, отображаемых при этом, скажем, в зеленом цвете, или вам придется изменять всю разметку. Однако в нашем случае, когда мы имеем дело с меню для выбора цвета, все выглядит достаточно разумно и естественно!
option[value="blue"] { background-color: #0000FF; color: #ffffff; }В этом случае также не следует забывать об отсутствии поддержки данного селектора броузером Internet Explorer 6.
Отправитель | Нити |
---|
3 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |