CSS-only floating label

One of those nifty things Google did with the Material Design guidelines is include floating labels. Don’t know what a floating label is? Check it out: Being the ever-curious sort that I am, I wondered if this could be accomplished sans JavaScript. Turn out, it can, but only for required fields. Here’s the demo: To make this work, the markup has to be structured in a very specific way: the input has to be in front of the label. (Don’t forget the for attribute on the label!) In this example, I’ve given the label a class, form-control-placeholder, and made it absolutely positioned. The container, which holds the label and input, is set to be relatively positioned, so the label can […]