Как изменить цвет текста и фона в текстовом поле?

🕛 23.01.2009, 00:19
Цвет фона элемента задается стилевым атрибутом background-color, а цвет текста с помощью атрибута color. Их необходимо добавить к селектору INPUT, но поскольку тег <INPUT> является универсальным, то он создает не только текстовое поле, но и другие элементы форм. Чтобы определить стиль только для конкретного поля можно воспользоваться классами, как показано в примере 1.
Пример 1. Цвет текста и фона в текстовом поле

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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"> .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>

В данном примере добавляется новый класс с именем colortext, он добавляется к тегу <INPUT> с помощью конструкции class="textfield".

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу <INPUT> в этом случае всегда добавляется параметр type="text". Используя запись INPUT[type="text"] задаем стиль для всех элементов <INPUT>, но стиль применяется только в том случае, когда type="text" (пример 2).

Пример 2. Использование селекторов атрибутов

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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[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>