#212121
1.form-control { 2 position: relative; 3 margin: 20px 0 40px; 4 width: 190px; 5} 6 7.form-control input { 8 background-color: transparent; 9 border: 0; 10 border-bottom: 2px #fff solid; 11 display: block; 12 width: 100%; 13 padding: 15px 0; 14 font-size: 18px; 15 color: #fff; 16} 17 18.form-control input:focus, 19.form-control input:valid { 20 outline: 0; 21 border-bottom-color: lightblue; 22} 23 24.form-control label { 25 position: absolute; 26 top: 15px; 27 left: 0; 28 pointer-events: none; 29} 30 31.form-control label span { 32 display: inline-block; 33 font-size: 18px; 34 min-width: 5px; 35 color: #fff; 36 transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 37} 38 39.form-control input:focus+label span, 40.form-control input:valid+label span { 41 color: lightblue; 42 transform: translateY(-30px); 43}
Comments
Variations
1 MIT License