Ранее мы уже научились изменять фоновый цвет выпадающего меню в форме. Однако можно ли использовать разный фон для каждого пункта меню, чтобы выделить различные варианты выбора?

Решение
Чтобы различные пункты меню отображались в различных цветовых решениях, можно присвоить каждому из них различные классы. Для пунктов меню можно изменять только значения свойств 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;
}