Цвет замещающего текста
В HTML5 к полям формы добавлен атрибут placeholder, который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.
<input placeholder="Текст">
Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы, как показано в примере 1.
Пример 1. Использование placeholder
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>placeholder</title>
<style>
body {background: #053f38; color: #98baba; }
input[type="search"] {
padding: 3px;
background: #333;
color: #053f38;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form action="handler.php">
<p><input type="search" placeholder="Поиск по сайту" />
<input type="submit" value="Искать"></p>
</form>
</body>
</html>Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder.
input::-moz-placeholder { color: red; }
В Safari и Chrome стиль текста меняется следующим образом.
input::-webkit-input-placeholder { color: red; }
Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).
Пример 2. Цвет текста
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>placeholder</title>
<style>
body {background: #053f38; color: #98baba; }
input[type="search"] {
padding: 3px;
background: #333;
color: #053f38;
border: 1px solid #ccc;
}
input[type="search"]::-webkit-input-placeholder {
color: #ccc;
}
input[type="search"]::-moz-placeholder {
color: #ccc;
}
</style>
</head>
<body>
<form action="handler.php">
<p><input type="search" placeholder="Поиск по сайту" />
<input type="submit" value="Искать"></p>
</form>
</body>
</html>Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.
Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.