::placeholder

Псевдоэлемент ::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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

• все шрифтовые свойства, начинающиеся с font (например, font-size или font-style);
• все свойства для работы с фоном, начинающиеся с background- (например, background-color или background-size);
• свойство color;
• свойства word-spacing, letter-spacing, text-decoration, text-transform и line-height;
• свойства text-shadow, группу свойств text-decoration и vertical-align.

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

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

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

+ Развернуть