::placeholder
The placeholder text of a field — the hint from the `placeholder` attribute.
Syntax
input::placeholder { … }Examples
An italic placeholder:
<style>
input::placeholder { color: steelblue; font-style: italic; }
</style>
<input placeholder="Search products">Notes
Keep the placeholder contrast high enough to read. A placeholder disappears as soon as the user types, so it does not replace a <label>.
See also
- :focus — Matches the element that currently has focus: a field being typed into, a button selected with Tab.
- <input> — An input field; its kind is set by the `type` attribute.
- :placeholder-shown — Matches an `<input>` or `<textarea>` while its placeholder is visible, that is, while the field is empty.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.