| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Встановити колір фону і тексту для однорядкового текстового поля форми.
Рішення
Колір фону елемента задається стильовим властивість background-color, а колір тексту за допомогою color, ці властивості необхідно додати до селектору INPUT. Оскільки тег <input> є універсальним, то він створює не тільки текстове поле, але й інші елементи форм і щоб визначити стиль для конкретного поля можна скористатися класами, як показано в прикладі 1.
Приклад 1. Колір тексту і фону в текстовому полі
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір тексту і фону</title>
<style>
.colortext {
background-color: #ffe; /* Колір фону */
color: #930; /* Колір тексту */
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p><input type="text" class="colortext">
<input type="submit" name="submit" value="Послати"></p>
</form>
</body>
</html>
Результат приклад показаний на рис. 1.
Рис. 1. Вигляд текстового поля після додавання до нього стилів
В даному прикладі додається новий клас з ім'ям colortext, він додається до тега <input> з допомогою конструкції class="textfield".
Аналогічно можна визначити стиль одночасно для всіх текстових полів, знаючи, що до тега <input> в цьому випадку завжди додається атрибутtype. Використовуючи запис INPUT[type="text"] задаємо стиль для всіх елементів <input>, але стиль застосовується тільки в тому випадку, коли значення атрибута type одно text (приклад 2).
Приклад 2. Використання селекторів атрибутів
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір фону і тексту в полі</title>
<style>
input[type="text"] {
background-color: navy;
color: #ffe;
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p><input type="text">
<input type="submit" name="Submit" value="Послати"></p>
</form>
</body>
</html>