Material Design Input Fields CSS3

Mimicking the effect of Material Design input fields using CSS. When focused, placeholder text will offset a bit to the top and act as a label. Only difference is that the label disappears when you start typing, which it shouldn’t. This is because I used the input’s placeholder attribute instead of a label element.




See the Pen ygmaGL by Elmer Balbin (@elmzarnsi) on CodePen.27172

Icons made by Madebyoliver from is licensed by CC 3.0 BY
Elmer Balbin

Full-stack developer from Bacolod, Google Local Guide, Agoda affiliate and casual DotA 2 player.

Buy me a burgerBuy me a burger

Leave a comment