::placeholder

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <input class="form-input" type="email" placeholder="Например: mygre@ema.il">
          <input class="form-input" type="email" placeholder="Например: mygre@ema.il">

        
        
          
        
      
        
          
          .form-input::placeholder {  color: gray;}
          .form-input::placeholder {
  color: gray;
}

        
        
          
        
      
Открыть демо в новой вкладке

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

Секция статьи "Как это понять"

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

Как пишется

Секция статьи "Как пишется"

Два двоеточия и ключевое слово placeholder.

Стиль применится ко всем подсказкам на странице:

        
          
          ::placeholder {  color: gray;}
          ::placeholder {
  color: gray;
}

        
        
          
        
      

Стиль применится только к подсказкам у полей ввода с классом email-input:

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

        
        
          
        
      

Подсказки

Секция статьи "Подсказки"

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

На практике

Секция статьи "На практике"

Денис Ежков

Секция статьи "Денис Ежков"

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

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