:placeholder-shown

Псевдокласс :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, изменят внешний вид текста-подсказки, но никак не затронут само поле ввода.

        
          
          <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;
}

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