CSS селектор :placeholder-shown — порожнє поле вводу

CSS псевдоклас :placeholder-shown вибирає поле вводу, у якому зараз видно плейсхолдер — тобто поле порожнє.

правити

Загальний опис

Це непрямий спосіб спитати «чи поле порожнє?». На ньому будується популярний прийом плаваючого підпису (floating label): доки поле порожнє, підпис лежить усередині; щойно щось ввели — він піднімається вгору.

правити

Нотатка

Селектор працює лише якщо в поля є атрибут placeholder. Без нього він не спрацює ніколи — саме тому в прикладі стоїть placeholder=" " з пробілом.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:placeholder-shown

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
placeholder-shown	47+	51+	9+	34+	79+	-

Підтримка: мобільні переглядачі

Переглядач
placeholder-shown	47+	yes	yes	9+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="field">
    <input type="text" id="name" placeholder=" ">
    <label for="name">Ваше ім'я</label>
</div>

.field { position: relative; }

.field label {
    position: absolute;
    left: .5rem;
    top: -.6rem;
    font-size: .75rem;
    background: #fff;
    transition: all .15s;
}

/* поки поле порожнє — підпис лежить усередині */
.field input:placeholder-shown + label {
    top: .5rem;
    font-size: 1rem;
}