:blank

:blank — псевдокласс, который совпадает с элементами, принимающими текстовый ввод (например, <input>, <textarea>), когда их значение пусто или состоит только из пробельных символов.

Отличается от :placeholder-shown тем, что работает и без атрибута placeholder, а также считает строку из одних пробелов «пустой».

Подсветим пустые поля и спрячем подсказку, когда пользователь что‑то ввёл.

        
          
          /* Пустые поля — неконтрастная рамка и подсказка */input:blank,textarea:blank {  border: 1px solid #979797;}/* Когда поле непустое — выделим основным цветом раздела */input:not(:blank),textarea:not(:blank) {  border-color: #2E9AFF;}/* Текстовую подсказку показываем только для пустых */input:blank + .hint,textarea:blank + .hint {  display: block;  color: #979797;}input:not(:blank) + .hint,textarea:not(:blank) + .hint {  display: none;}
          /* Пустые поля — неконтрастная рамка и подсказка */
input:blank,
textarea:blank {
  border: 1px solid #979797;
}

/* Когда поле непустое — выделим основным цветом раздела */
input:not(:blank),
textarea:not(:blank) {
  border-color: #2E9AFF;
}

/* Текстовую подсказку показываем только для пустых */
input:blank + .hint,
textarea:blank + .hint {
  display: block;
  color: #979797;
}

input:not(:blank) + .hint,
textarea:not(:blank) + .hint {
  display: none;
}

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

        
          
          <label>  Ваш ник  <input type="text">  <span class="hint">Можно латиницей, 3–20 символов</span>  <!-- Когда в поле только пробелы, :blank всё ещё совпадает -->  <!-- Когда в поле любой непробельный символ, совпадать перестаёт --></label>
          <label>
  Ваш ник
  <input type="text">
  <span class="hint">Можно латиницей, 3–20 символов</span>
  <!-- Когда в поле только пробелы, :blank всё ещё совпадает -->
  <!-- Когда в поле любой непробельный символ, совпадать перестаёт -->
</label>

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

        
          
          /* Совпадает, когда значение пустое или состоит только из пробелов */input:blank { /* ... */ }/* Обратный случай — когда есть хоть один непробельный символ */input:not(:blank) { /* ... */ }
          /* Совпадает, когда значение пустое или состоит только из пробелов */
input:blank { /* ... */ }

/* Обратный случай — когда есть хоть один непробельный символ */
input:not(:blank) { /* ... */ }

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

• :blank анализирует текущее значение элемента. Пустая строка и строка из одних пробельных символов — это «пусто».
• :placeholder-shown зависит от наличия и отображения плейсхолдера. Поле без placeholder при пустом значении не будет :placeholder-shown, но будет :blank.
• :empty — про узлы в DOM (нет дочерних элементов/текста), а не про значение полей формы.
• Валидность (:invalid / :invalid, :user-invalid) — другая плоскость: поле может быть одновременно :blank и :invalid (например, required).

💡 Комбинируйте с :focus/:focus-visible, чтобы аккуратно подсвечивать только активные пустые поля: input:blank:focus { … }.
💡 Используйте :not(:blank) для показа «кнопки очистки» или счётчика символов только когда поле непустое.
💡 Помните, что неразрывный пробел и другие пробельные символы тоже делают поле :blank.