::placeholder
Текст-подсказка поля из атрибута `placeholder`.
Синтаксис
input::placeholder { … }Примеры
Подсказка курсивом:
<style>
input::placeholder { color: steelblue; font-style: italic; }
</style>
<input placeholder="Search products">Примечания
Оставляйте подсказке достаточный контраст, чтобы её можно было прочитать. Она исчезает, как только пользователь начинает печатать, поэтому <label> она не заменяет.
См. также
- :focus — Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
- :placeholder-shown — Срабатывает для `<input>` или `<textarea>`, пока виден их текст-подсказка, то есть пока поле пустое.
Вопросы и ответы по теме
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.