#212121
1.inputbox { 2 position: relative; 3 width: 196px; 4} 5 6.inputbox input { 7 position: relative; 8 width: 100%; 9 padding: 20px 10px 10px; 10 background: transparent; 11 outline: none; 12 box-shadow: none; 13 border: none; 14 color: #23242a; 15 font-size: 1em; 16 letter-spacing: 0.05em; 17 transition: 0.5s; 18 z-index: 10; 19} 20 21.inputbox span { 22 position: absolute; 23 left: 0; 24 padding: 20px 10px 10px; 25 font-size: 1em; 26 color: #8f8f8f; 27 letter-spacing: 00.05em; 28 transition: 0.5s; 29 pointer-events: none; 30} 31 32.inputbox input:valid ~span, 33.inputbox input:focus ~span { 34 color: #45f3ff; 35 transform: translateX(-10px) translateY(-34px); 36 font-size: 0,75em; 37} 38 39.inputbox i { 40 position: absolute; 41 left: 0; 42 bottom: 0; 43 width: 100%; 44 height: 2px; 45 background: #45f3ff; 46 border-radius: 4px; 47 transition: 0.5s; 48 pointer-events: none; 49 z-index: 9; 50} 51 52.inputbox input:valid ~i, 53.inputbox input:focus ~i { 54 height: 44px; 55}
25K views
25K views
Comments
Variations
1 MIT License