#212121
1.input-group { 2 position: relative; 3} 4 5.input { 6 border: solid 1.5px #9e9e9e; 7 border-radius: 1rem; 8 background: none; 9 padding: 1rem; 10 font-size: 1rem; 11 color: #f5f5f5; 12 transition: border 150ms cubic-bezier(0.4,0,0.2,1); 13} 14 15.user-label { 16 position: absolute; 17 left: 15px; 18 color: #e8e8e8; 19 pointer-events: none; 20 transform: translateY(1rem); 21 transition: 150ms cubic-bezier(0.4,0,0.2,1); 22} 23 24.input:focus, input:valid { 25 outline: none; 26 border: 1.5px solid #1a73e8; 27} 28 29.input:focus ~ label, input:valid ~ label { 30 transform: translateY(-50%) scale(0.8); 31 background-color: #212121; 32 padding: 0 .2em; 33 color: #2196f3; 34}
Comments
1krump4you 11. August at 12:34
11. August at 12:34
Cute
MIT License