htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам > Цвет фона элементов формы

Шаг 19. Цвет фона элементов формы

Влад Мержевич

Для изменения фона под элементами формы используется универсальный стилевой атрибут background или его производный параметр background-color. Для элементов, которые образованы с помощью тега <INPUT>, в общем случае синтаксис для изменения цвета фона будет следующий.

<input type="..." style="background: цвет">

Не обязательно стиль указывать внутри тега, более правильным вариантом будет вынести его в таблицу глобальных стилей, как показано в примере 19.1.

Пример 19.1. Изменение цвета некоторых полей формы

<!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">
   INPUT {
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <table cellpadding="4" cellspacing="0">
    <tr> 
     <td>Текстовое поле</td>
     <td>Кнопка</td>
    </tr>
    <tr> 
     <td><input name="textfield" type="text" value="Ваше имя"></td>
     <td><input name="Submit" type="submit" value="Submit"></td>
    </tr>
    <tr> 
     <td>Переключатели</td>
     <td>Флажки</td>
    </tr>
    <tr> 
     <td>
       <input type="radio" name="radio" value="radiobutton"> 
       <input type="radio" name="radio" value="radiobutton2"> 
       <input name="radio" type="radio" value="radiobutton3">
     </td>
     <td>
       <input type="checkbox" name="checkbox" value="checkbox"> 
       <input type="checkbox" name="checkbox2" value="checkbox"> 
       <input type="checkbox" name="checkbox3" value="checkbox">
     </td>
    </tr>
   </table> 
  </form> 
 </body> 
</html>

Результат данного примера показан ниже (рис. 19.1).

Рис. 19.1

Рис. 19.1. Цвет фона у различных элементов формы

 

Замечание

Браузер Firefox не изменяет цвет фона у переключателей и флажков.

Цвет фона многострочного текста

Аналогично, цвет фона меняется и у многострочного текста (тег <TEXTAREA>).

<textarea style="background: цвет">...</textarea>

В примере 19.2 показан способ изменения цвета текста и фона поля.

Пример 19.2. Фон у поля с многострочным текстом

<!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">
   TEXTAREA {
    background: #000; /* Цвет фона */
    color: #fc0; /* Цвет текста */
    width: 100%; /* Ширина поля */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><textarea cols="25" rows="10">
    Введите ваш комментарий
   </textarea></p> 
  </form> 
 </body>
</html>

Результат данного примера показан на рис. 19.2.

Рис. 19.2

Рис. 19.2. Цвет фона и текста в поле

Цвет фона списка

Список обычно формируется из трех тегов: <SELECT>, <OPTGROUP> и <OPTION>, к каждому из них можно применять свои параметры цвета. Таким образом, с помощью цвета акцентируется внимание на отдельных пунктах списка или они визуально отделяются друг от друга.

Цвет списка

Вначале рассмотрим, как изменить цвет всего списка целиком. Синтаксис следующий.

<select style="background: цвет">
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
</select>

В примере 19.3 показано, как установить цвет фона и текста списка.

Пример 19.3. Цвет фона списка

<!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">
   SELECT {
    background: #69c; /* Цвет фона */
    color: #ffe; /* Цвет текста */
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
    <p><select>
     <option>Аметист</option>
     <option>Бирюза</option>
     <option>Жадеит</option>
     <option>Сердолик</option>
    </select></p>
   </form>
 </body>
</html>

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

Рис. 19.3

Рис. 19.3. Цвет фона списка

Цвет группы в списке

Тег <OPTGROUP> предназначен для группирования элементов списка и добавления к группе заголовка, который задается параметром label. Цвет фона добавляется ко всей группе целиком, а не только к ее заголовку. Общий синтаксис следующий.

<select>
 <optgroup label="Заголовок 1" style="background: цвет">
  <option>Пункт 1.1</option>
  <option>Пункт 1.1</option>
 </optgroup>
 <optgroup label="Заголовок 2" style="background: цвет">
  <option>Пункт 2.1</option>
  <option>Пункт 2.1</option>
 </optgroup>
</select>

В примере 19.4 показан один из способов изменения цвета группы списка.

Пример 19.4. Цвет фона и текста группы списка

<!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>
 </head>
 <body>
  <form action="handler.php">
   <p><select>
    <optgroup label="Русская кухня" style="background: maroon; color: white">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня" style="background: #fffacd; color: #0000cd">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
  </form>
 </body>
</html>

Результат данного примера показан ниже (рис. 19.4).

Рис. 19.4

Рис. 19.4. Цвет фона в списке

Цвет отдельных пунктов списка

Для выделения цветом желаемых пунктов меню стилевое свойство background следует установить для тега <OPTION>.

<select>
  <option style="background: цвет">Название пункта</option>
</select>

В примере 19.5 показано создание списка из трех разноцветных пунктов, цвет для которых установлен через стилевые классы.

Пример 19.5. Цвет элементов списка

<!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">
   .diamond {
    color: #66f;
   }
   .emerald {
    background: #3baf17;
    color: #fff;
   }
   .ruby {
    background: #d31c1c;
    color: #fff;
   }
  </style>
 </head>
 <body>
   <form action="handler.php">
     <p><select>
      <option selected>Камни</option>
      <option class="diamond">Алмаз</option>
      <option class="emerald">Изумруд</option>
      <option class="ruby">Рубин</option>
     </select></p>
   </form>
  </body>
</html>

Результат данного примера показан на рис. 19.5.

Рис. 19.5

Рис. 19.5. Цвет фона элементов списка

Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru