Input by TechByElijah
#e8e8e8
1.input-container { 2 position: relative; 3} 4 5.input { 6 font-size: 1em; 7 padding: 0.6em 1em; 8 border: none; 9 border-radius: 6px; 10 background-color: #f8f8f8; 11 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 12 transition: background-color 0.3s ease, box-shadow 0.3s ease; 13 max-width: 200px; 14 color: #333; 15} 16 17.input:hover { 18 background-color: #f2f2f2; 19} 20 21.input:focus { 22 outline: none; 23 background-color: #fff; 24 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 25} 26 27.input::placeholder { 28 color: #999; 29} 30 31.highlight { 32 position: absolute; 33 bottom: 0; 34 left: 0; 35 width: 0; 36 height: 2px; 37 background-color: #6c63ff; 38 transition: width 0.3s ease; 39} 40 41.input:focus + .highlight { 42 width: 100%; 43} 44 45/* Optional: Animation on focus */ 46@keyframes input-focus { 47 from { 48 transform: scale(1); 49 box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); 50 } 51 52 to { 53 transform: scale(1.02); 54 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 55 } 56} 57 58.input:focus { 59 animation: input-focus 0.3s ease; 60} 61
2K views
2K views
MIT License