:placeholder-shown
Matches an `<input>` or `<textarea>` while its placeholder is visible, that is, while the field is empty.
Syntax
input:placeholder-shown { … }Examples
A floating label: it sits inside the field while it is empty and moves up once you type:
<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>Notes
The field needs a placeholder attribute, even a single space, otherwise the pseudo-class never matches. Do not confuse it with ::placeholder, which styles the placeholder text itself. A common trick is input:not(:placeholder-shown) — "the user has typed something".
See also
- ::placeholder — The placeholder text of a field — the hint from the `placeholder` attribute.
- placeholder — A hint or example inside an empty field.
- :focus — Matches the element that currently has focus: a field being typed into, a button selected with Tab.
- A + B — Sibling combinators: `+` selects the element right after A, `~` selects all following siblings of A.
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.