:placeholder-shown

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

Кратко

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

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

Пример

Секция статьи "Пример"
        
          
          <input placeholder="Введите ваше имя">
          <input placeholder="Введите ваше имя">

        
        
          
        
      
        
          
          input {  border: 1px solid black;}input:placeholder-shown {  border-color: teal;}
          input {
  border: 1px solid black;
}

input:placeholder-shown {
  border-color: teal;
}

        
        
          
        
      

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

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

Если полю ввода задан атрибут placeholder с каким-то значением, то внутри поля будет показана текстовая подсказка. Она пропадёт, если пользователь введёт хотя бы один символ. По сути псевдокласс :placeholder-shown будет применять стили к пустым полям ввода.

Как пишется

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

Двоеточие и ключевое слово placeholder-shown.

        
          
          :placeholder-shown {  color: teal;}
          :placeholder-shown {
  color: teal;
}

        
        
          
        
      

Подсказки

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

💡 Псевдокласс :placeholder-shown — это не то же самое, что псевдоэлемент ::placeholder. Псевдокласс применит стили к самому полю ввода. А стили, применённые к псевдоэлементу ::placeholder, изменят внешний вид текста-подсказки, но никак не затронут само поле ввода.

На практике

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

Денис Ежков

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

🛠 Этот псевдокласс можно использовать совместно с псевдоклассом :invalid для стилизации некорректно заполненных полей ввода.

🛠 Иногда длина подсказки больше ширины текстового поля. В результате она некрасиво обрезается. Можно использовать псевдокласс :placeholder-shown, чтобы сделать обрезку чуть симпатичнее:

        
          
          <p>Обычная обрезка</p><input type="text" placeholder="Можно искать по номеру телефона, фамилии или email"><p>Красивая обрезка</p><input type="text" placeholder="Можно искать по номеру телефона, фамилии или email" class="ellipsis">
          <p>Обычная обрезка</p>
<input type="text" placeholder="Можно искать по номеру телефона, фамилии или email">

<p>Красивая обрезка</p>
<input type="text" placeholder="Можно искать по номеру телефона, фамилии или email" class="ellipsis">

        
        
          
        
      
        
          
          .ellipsis:placeholder-shown {  text-overflow: ellipsis;}
          .ellipsis:placeholder-shown {
  text-overflow: ellipsis;
}

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