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
|
1 2 3 4 5 |
<form> <input class="field" placeholder="Username" type="text"> <input class="field" placeholder="Password" type="password"> <input class="submit" type="submit" value="Login"> </form> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
.field { margin: 25px auto; width: 200px; display: block; border: none; padding: 10px 0; border-bottom: solid 1px #1abc9c; transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); background-position: -200px 0; background-size: 200px 100%; background-repeat: no-repeat; color: #0e6252; } .field::-webkit-input-placeholder { transition: all 0.3s ease-in-out; } .field:focus { box-shadow: none; outline: none; background-position: 0 0; } .field:focus::-webkit-input-placeholder { color: #1abc9c; font-size: 11px; transform: translateY(-20px); visibility: visible !important; } .submit { display: block; margin: 25px auto; box-sizing: border-box; padding: 10px 30px; background-color: #1abc9c; border: 1px solid #1abc9c; color: #FFF; border-radius: 3px; font-size: 14px; cursor: pointer; transition: all 0.3s ease-in-out; } .submit:hover { background-color: #FFF; color: #1abc9c; } |
Output
See the Pen ygmaGL by Elmer Balbin (@elmzarnsi) on CodePen.27172
Full-stack developer from Bacolod, Google Local Guide, Agoda affiliate and casual DotA 2 player.
Leave a comment