Revisiting the Float Label Pattern with CSS
The “floating label” is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It’ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below.
Emil Björklund walks us through an interesting demo that replicates this pattern but without the need for any JavaScript and with the :placeholder-shown pseudo selector.
Note there are other CSS-only methods for this (check out a ton of different methods in this big ol’ Collection), but :placeholder-shown is the perfect selector for this, other than it’s current level of support.
Direct Link to Article — Permalink
Revisiting the Float Label Pattern with CSS is a post from CSS-Tricks
