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.

HTML

CSS

Output

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

Icons made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY
Elmer Balbin

Web developer from Bacolod, Google Local Guide, and casual DotA 2 player.

about me

Leave a comment

avatar

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