Как задать цвет placeholder на CSS

К полям формы добавляют специальный атрибут placeholder, в котором указывают подсказку, в каком виде ожидаются данные.

Атрибут placeholder работает со следующими типами ввода:

• текст
• поиск
• URL
• телефон
• e-mail
• пароль

Обратите внимание, что placeholder не заменяет собой label. В label пишется описание поля, а в placeholder формат данных.

Пример кода для изменения цвета placeholder:

::placeholder {
  color: #333;
}

Некоторые клиенты хотят, чтобы текст из placeholder исчезал не при начале ввода текста, а при получении полем фокуса. Для этого при фокусе можно задать прозрачный цвет для placeholder.

input::placeholder {
  color: #333;
}
input:focus::placeholder {
  color: transparent;
}
textarea::placeholder {
  color: #333;
}
textarea:focus::placeholder {
  color: transparent;
}

Для совместимости с различными версиями браузеров не забывайте пользоваться автопрефиксером.

Часто текст в placeholder делают очень светло-серым, а это противоречит 1.4.3 Критериев доступности для веб-материалов (WCAG). Не забывайте о том, что текст должен иметь контрастность цвета не менее 4,5: 1.