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

Web developer from Bacolod, Steam Sale hunter, and casual DotA 2 player.

about me

Leave a comment


Get great deals on hotel rooms from all over the world BOOK NOW