#e8e8e8
1.inputContainer { 2 position: relative; 3 margin-bottom: 20px; 4} 5 6.customInput { 7 width: 100%; 8 padding: 12px; 9 font-size: 16px; 10 background-color: transparent; 11 border: none; 12 border-bottom: 2px solid #007bff; 13 outline: none; 14 transition: border-color 0.3s ease; 15 color: #007bff; 16} 17 18.customInput:focus, 19.customInput:not(:placeholder-shown) { 20 border-color: #0056b3; 21} 22 23.inputLabel { 24 position: absolute; 25 top: 0; 26 left: 0; 27 pointer-events: none; 28 padding: 5px; 29 font-size: 16px; 30 color: #007bff; 31 transition: transform 0.3s ease, color 0.3s ease; 32} 33 34.customInput:focus + .inputLabel, 35.customInput:not(:placeholder-shown) + .inputLabel { 36 transform: translateY(-100%) translateX(-5px) scale(0.8); 37} 38 39.inputUnderline { 40 position: absolute; 41 bottom: 0; 42 left: 0; 43 width: 100%; 44 height: 2px; 45 background-color: #007bff; 46} 47
577 views
577 views
Comments
MIT License