Оглавление

Использование цветного фона для меню, созданного с помощью элементов select

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

 

Решение
Чтобы различные пункты меню отображались в различных цветовых решениях, можно присвоить каждому из них различные классы. Для пунктов меню можно изменять только значения свойств color и background-
color.

Внимание
Safari не любит полоски. Помните, что Safari не поддерживает возможность задания фонового цвета для пунктов меню select, поэтому описанное решение не будет работать в данном браузере.

 

Ниже представлен необходимый код:

<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, отображаемых при этом, скажем, в зеленом цвете, или вам придется изменять всю разметку. Однако в нашем случае, когда мы имеем дело с меню для выбора цвета, все выглядит достаточно разумно и естественно!

Совет
Стиль со смыслом. Используйте различный фоновый цвет для выделения групп взаимосвязанных опций или чередуйте цветовое оформление пунктов меню select.

 

Совет
Альтернативный вариант: использование селекторов атрибутов. Опять же вместо добавления классов в разметку можно воспользоваться селекторами атрибутов CSS. К примеру, вместо селектора option.blue можно было бы написать:
option[value="blue"] {
  background-color: #0000FF;
  color: #ffffff;
}
В этом случае также не следует забывать об отсутствии поддержки данного селектора броузером Internet Explorer 6.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити