CSS - input floating label animation ✨

Input elements are often used in web development. But using only a placeholder to describe the fields are harmful.

So let's create a floating label with very little code. Check out the code in this CodePen and try out the result.

I have used some JavaScript to detect when the field has a value, but that could also be done with required or placeholder and a not selector.

<input type="text" required/>

input:not(:invalid) + span

or

<input type="text" placeholder=" "/>

input:not(:placeholder-shown) + span

Also I'm looking forward to the lh unit in CSS which are coming, so I don't have to specify the line-height.

But, remember that floating labels are problematic, as this has some of the drawbacks mentioned in that article.