Input by Minka1902
#e8e8e8
1.input-container { 2 position: relative; 3 width: clamp(100px, 100%, 200px); 4} 5 6.input { 7 padding: 10px; 8 height: 40px; 9 width: clamp(100px, 100%, 200px); 10 border: 2px solid #0B2447; 11 border-top: none; 12 font-size: 16px; 13 background: transparent; 14 outline: none; 15 box-shadow: 7px 7px 0px 0px #0B2447; 16 transition: all 0.5s; 17} 18 19.input:focus { 20 box-shadow: none; 21 transition: all 0.5s; 22} 23 24.label { 25 position: absolute; 26 top: 10px; 27 left: 10px; 28 color: #0B2447; 29 transition: all 0.5s; 30 transform: scale(0); 31 z-index: -1; 32} 33 34.input-container .top-line { 35 position: absolute; 36 content: ""; 37 background-color: #0B2447; 38 width: 100%; 39 height: 2px; 40 right: 0; 41 top: 0; 42 transition: all 0.5s; 43} 44 45.input-container input[type="text"]:focus~.top-line { 46 width: 35%; 47 transition: all 0.5s; 48} 49 50.input-container .under-line { 51 position: absolute; 52 content: ""; 53 background-color: #0B2447; 54 width: 0%; 55 height: 2px; 56 right: 0; 57 bottom: 0; 58 transition: all 0.5s; 59} 60 61.input-container input[type="text"]:focus~.under-line { 62 width: 100%; 63 transition: all 0.5s; 64} 65 66.input-container input[type="text"]:focus~.label { 67 top: -10px; 68 transform: scale(1); 69 transition: all 0.5s; 70}
1.3K views
1.3K views
MIT License