← All elements
<div class="f"><input id="n" placeholder=" " type="text"><label for="n">Your name</label></div>About this layout
A text field whose label lifts out of the way as soon as you focus or type, driven by :placeholder-shown.
How it works
The input has a single space as its placeholder, which makes :placeholder-shown true while the field is empty. The label sits inside the field until the input is focused or filled, then a sibling selector lifts it to the top and shrinks it. No script watches the value.
Ways to customise it
- Change the focus colour in the border and label rules to match your brand.
- Adjust the top and font-size values to control how far the label floats.
- Give the label a background to make it cut through a border instead of sitting inside.
Good to know
The label stays linked to the input through the for and id pair, so screen readers read it. Keep the placeholder as a single space or the effect breaks. :placeholder-shown is supported in all current browsers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.