Revisiting the Float Label Pattern With CSS

thatemil.com / filed under HTML & CSS

The float label pattern is a slick pattern that designers seem to love. I’m not sure that I’m 100% in love with it, but I couldn’t resist cooking up a quick demo implementation. This version uses a few nice form-styling tricks using modern CSS that I’ve seen recently, particularly the :placeholder-shown selector.

Subscribe to newsletter

Design and frontend links delivered to your inbox every day and week. No spam, unsubscribe at anytime.

Choose frequency

Permission