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.
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.