This post is saved as a draft.
#212121
1/* use it in dark theme */ 2.input-container { 3 position: relative; 4 margin: 50px auto; 5 width: 190px; 6} 7 8.input-container input[type="text"] { 9 font-size: 20px; 10 color: rgb(255, 255, 255); 11 border: none; 12 border-bottom: 2px solid #a5a2a2; 13 outline: none; 14 width: 100%; 15 background-color: transparent; 16} 17 18.label { 19 transition: all 0.3s ease; 20 color: #d3d2d2; 21 position: absolute; 22 top: 0; 23 left: 0; 24 pointer-events: none; 25} 26 27.input-container input[type="text"]:focus~.label, 28 .input-container input[type="text"]:valid~.label { 29 top: -20px; 30 transition: 0.3s; 31 color: rgb(172, 46, 172); 32} 33 34.input-container .underline { 35 position: absolute; 36 bottom: 4px; 37 left: -7px; 38 height: 2px; 39 width: 110%; 40 background-color: rgb(172, 46, 172); 41 transform: scaleX(0); 42} 43 44.input-container .sideline { 45 position: relative; 46 bottom: 15px; 47 right: 18px; 48 height: 2px; 49 width: 18%; 50 background-color: rgb(172, 46, 172); 51 transform: scaleX(0); 52 rotate: 90deg; 53} 54 55.input-container .upperline { 56 position: absolute; 57 bottom: 30px; 58 left: -8px; 59 height: 2px; 60 width: 110%; 61 background-color: rgb(172, 46, 172); 62 transform: scaleX(0); 63} 64 65.input-container .line { 66 position: relative; 67 bottom: 17px; 68 left: 178px; 69 height: 2px; 70 width: 18%; 71 background-color: rgb(172, 46, 172); 72 transform: scaleX(0); 73 rotate: 90deg; 74} 75 76.input-container input[type="text"]:focus~.underline, 77 .input-container input[type="text"]:valid~.underline { 78 transform: scaleX(1); 79 transition: 1s; 80} 81 82.input-container input[type="text"]:focus~.sideline, 83 .input-container input[type="text"]:valid~.sideline { 84 transform: scaleX(1); 85 transition: 1s; 86} 87 88.input-container input[type="text"]:focus~.upperline, 89 .input-container input[type="text"]:valid~.upperline { 90 transform: scaleX(1); 91 transition: 1s; 92} 93 94.input-container input[type="text"]:focus~.line, 95 .input-container input[type="text"]:valid~.line { 96 transform: scaleX(1); 97 transition: 1s; 98}
Variation of ainput
Variation of ainput