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.
Top comments (0)