Коротко: изменить placeholder в CSS можно псевдоэлементом ::placeholder: задать цвет, размер и начертание. В Firefox дополнительно нужен opacity: 1, иначе подсказка будет бледнее, чем хочется. Помните: placeholder — не замена подписи и не должен быть слишком бледным.
Что можно задать
| Свойство | Результат |
|---|---|
color |
цвет подсказки |
font-size, font-style |
размер и начертание |
opacity |
прозрачность (важно для Firefox) |
letter-spacing |
разрядка |
Вкладки: примеры
::placeholder {
color: #9a9a9a;
}Базовый вариант: один псевдоэлемент для всех полей. Работает в современных браузерах без префиксов.
/* современный синтаксис */
input::placeholder { color: #9a9a9a; opacity: 1; }
/* старые движки (для совместимости) */
input::-webkit-input-placeholder { color: #9a9a9a; }
input::-moz-placeholder { color: #9a9a9a; opacity: 1; }
input:-ms-input-placeholder { color: #9a9a9a; }Префиксы нужны всё реже, но в старых проектах их ещё можно встретить. Главное — opacity: 1 для Firefox.
input:focus::placeholder { color: #c4c4c4; } /* бледнее при фокусе */
input:disabled::placeholder { color: #ccc; }Подсказка может «уходить» на второй план при вводе — это визуально помогает понять, что поле активное.
- placeholder не заменяет
label: подпись должна быть и текстом; - контраст подсказки проверяйте: слишком бледная не читается;
- не вставляйте в placeholder важные инструкции — исчезает при вводе;
- не дублируйте в placeholder то, что уже написано в подписи.
opacity: 1. Это самая частая причина «неправильного» цвета подсказки.Практика: стилизовать подсказку
- Задайте цвет, отличный от цвета вводимого текста.
- Добавьте
opacity: 1для кроссбраузерности. - Проверьте размер и начертание подсказки.
- Проверьте контраст и читаемость.
- Убедитесь, что у полей есть
label. - Протестируйте в разных браузерах.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Цвет «не тот» в Firefox | прозрачность по умолчанию | opacity: 1 |
| Правило не применяется | указан input::placeholder без типа |
уточнить селектор |
| Подсказка не читается | низкий контраст | сделать темнее |
| Инструкция «пропала» | была в placeholder | перенести в подпись или подсказку под полем |
Проверьте себя
Вопросы и ответы
Нет, только текст. Для «иконки внутри поля» используют background-image у самого поля.
Не обязательно. Placeholder полезен как пример формата («+7 999 000-00-00»), но подпись должна быть всегда.
Свойством color у самого поля. Placeholder — отдельный псевдоэлемент со своим цветом.
Так работает placeholder: он показывается только пока поле пустое. Если нужна постоянная подсказка — используйте label или текст под полем.
Итоги
- Подсказка стилизуется через
::placeholder. - Для Firefox добавляйте
opacity: 1. - Placeholder не заменяет подпись поля.
- Следите за контрастом подсказки.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.