Floating Label CSS

How the Floating Label Form works

Floating label CSS: how the label moves

The trick is the :placeholder-shown pseudo-class. Each input has a placeholder attribute whose text is made transparent, so it is never visible — but the browser still knows whether it is "shown", which is only when the field is empty. The label sits over the input, and two selectors move it: input:focus + label lifts it while the field is active, and input:not(:placeholder-shown) + label keeps it lifted whenever there is a value. No script, no state.

Source order matters. The label comes after the input in the markup so the + sibling combinator can reach it. Visually it is positioned absolutely over the input, so the order is invisible to users, and <label for> still links the two for clicks and screen readers.

Outlined. The classic Material outline: a bordered box, and the label shrinks and moves up to sit on the border. A background colour behind the label masks the border line beneath it, which is why the label background matches the field background. On focus the border takes the accent colour with a soft ring.

Filled. A tinted block with a bottom border only. The input gets extra top padding so the shrunk label fits inside the box above the text, rather than crossing a border.

Underline. The most minimal: no box, just a bottom rule that changes colour on focus. The label behaves as in the filled style, sliding up inside the field's top padding.

Transitions. The label animates transform and top, both cheap for the browser. The scale is 0.8 for outlined and 0.75 for the other two, chosen so the shrunk label stays legible at a 16px base size.

Autofill. Browsers that autofill a field give it a value, so :placeholder-shown becomes false and the label lifts correctly. Chrome also applies its own autofill background; override :-webkit-autofill if that clashes with your field colour.

Related tools