Input by santhoshsj-dev
#212121
1.input-wrapper { 2 position: relative; 3 width: 200px; 4 margin: 50px auto; 5} 6 7.input-box { 8 font-size: 16px; 9 padding: 10px 0; 10 border: none; 11 border-bottom: 2px solid #ccc; 12 color: #08AEEA; 13 width: 100%; 14 background-color: transparent; 15 transition: border-color 0.3s ease-in-out; 16} 17 18.underline { 19 position: absolute; 20 bottom: 0; 21 left: 0; 22 width: 100%; 23 height: 2px; 24 background-color: #08AEEA; 25 transform: scaleX(0); 26 transition: transform 0.3s ease-in-out; 27} 28 29.input-box:focus { 30 border-color: #08AEEA; 31 outline: none; 32} 33 34.input-box:focus + .underline { 35 transform: scaleX(1); 36} 37
1.8K views
1.8K views
MIT License