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

Обновлено: 30.05.2022

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

Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder. Такая подсказка обычно исчезает при наборе текста.

Синтаксис

<i>input</i>:placeholder { ... }
<i>textarea</i>:placeholder-shown { ... }

Пример

В данном примере пустое поле отображается с красной рамкой, при вводе текста рамка меняет цвет на зелёный.

Браузеры

:placeholder-shown

Посмотреть совместимость на Can I use?

:placeholder-shown