Цвет замещающего текста



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

В 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.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.