skip to main content

:placeholder-shown

css

Кратко 🔗

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

Пример 🔗

<input placeholder="Введите ваше имя">
input {
border: 1px solid black;
}

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

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

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

Как пишется 🔗

: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">
.ellipsis:placeholder-shown {
text-overflow: ellipsis;
}

See the Pen placeholder-shown by Denis Ezhkov (@ezhkov) on CodePen.

Автор: Денис,