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