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 […]


Generally speaking, I don’t use the family site for posting stuff related to coding. But every once in a while, I’ll write something that I just have to share. I was inspired by a Photoshop tutorial which details the creation of a cool little share dropdown. It deals solely with the imagery, however, not functionality. So I set to work to recreate it in code.