Клавиша / esc

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

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