skip to main content

::placeholder

css

Кратко 🔗

Псевдоэлемент ::placeholder используется для стилизации текста-плейсхолдера в полях ввода <input> и <textarea>.

Пример 🔗

<input class="form-input" type="email" placeholder="Например: mygre@ema.il" />
.form-input::placeholder {
color: gray;
font-size: 1.2em;
}

Как это понять 🔗

Элементам <input> и <textarea> можно задавать атрибут placeholder. Текст, содержащийся в этом атрибуте, будет отображаться внутри поля ввода, пока пользователь ничего не ввёл. Этот текст можно стилизовать, используя псевдоэлемент ::placeholder. Стили для введённого текста и текста-плейсхолдера в общем случае должны различаться.

Как пишется 🔗

::placeholder {
color: gray;
}

Стиль применится ко всем плейсхолдерам на странице.

.email-input::placeholder {
color: darkblue;
}

Стиль применится только к плейсхолдерам на полях ввода атрибут class которых равен email-input.

Подсказки 🔗

💡 Для стилизации плейсхолдера можно использовать только следующие свойства:

В работе 🔗

🛠 Плейсхолдер не должен выступать как замена тегу <label>. Основное назначение плейсхолдера — дать подсказку к правильному заполнению поля. Дизайнеры зачастую любят экономить место в формах и не рисуют лейблы у полей, заменяя их плейсхолдерами. Это не лучшая практика, поэтому, если вам попадётся такой макет, обговорите с дизайнером возможность изменения макета в лучшую сторону, добавив лейблы.

🛠 Желательно стилизовать плейсхолдер таким образом, чтобы визуально он отличался от введённого текста. Как правило плейсхолдер делают полупрозрачным, либо просто светлее вводимого текста.