Псевдо-класс :placeholder-shown

CSS
Добавлено: 6 окт. 2018 г.

Что такое :placeholder-shown?

:placeholder-shown - это псевдокласс, который срабатывает в тот момент, когда у тегов input или textarea имеется атрибут placeholder и он заполнен.

Применение

Применяется только к элементам ввода, таким как input и textarea.

<input type="text" placeholder="Placeholder text">
input:placeholder-shown{
	border: 2px solid red
}

В данном примере красная рамка у тега input будет присутствовать до тех пор, пока мы не начнем вводить текст в данном поле.

Стоит отметить, что эта технология поддерживается не всеми браузерами, а для некоторых нужны префиксы и перед использованием стоит проверить совместимость

Префиксы

:-ms-input-placeholder //IE 11

Пример

See the Pen xyErbY by Timur Khudiyev (@velsihtml) on CodePen.