:placeholder-shown
Срабатывает для `<input>` или `<textarea>`, пока виден их текст-подсказка, то есть пока поле пустое.
Синтаксис
input:placeholder-shown { … }Примеры
«Плавающая» подпись: лежит внутри пустого поля и поднимается, когда начинаешь вводить:
<style>
.field { position: relative; margin-top: 16px; }
.field input { padding: 14px 8px 4px; font-size: 16px; }
.field label { position: absolute; left: 9px; top: 2px; font-size: 11px; color: teal; transition: 0.2s; }
.field input:placeholder-shown + label { top: 12px; font-size: 16px; color: gray; }
</style>
<div class="field">
<input id="city" placeholder=" ">
<label for="city">City</label>
</div>Примечания
У поля должен быть атрибут placeholder, хотя бы из одного пробела, иначе псевдокласс не сработает никогда. Не путайте с ::placeholder, который стилизует сам текст подсказки. Частый приём — input:not(:placeholder-shown): «пользователь что-то ввёл».
См. также
- ::placeholder — Текст-подсказка поля из атрибута `placeholder`.
- placeholder — Подсказка-пример внутри пустого поля.
- :focus — Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
- A + B — Комбинаторы соседей: `+` выбирает элемент сразу после A, `~` — всех следующих соседей A.
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.