Input by Amine-maker
#e8e8e8
1#label-input { 2 transition: all 0.1s ease-in-out; 3 color: #2c2c54; 4 position: absolute; 5 top: 30%; 6 left: 18px; 7 transform: scale(0.95); 8 opacity: 1; 9 pointer-events: none; 10} 11 12.input-base { 13 border-radius: 10px; 14} 15 16#input:focus ~ label#label-input, 17#input:not(:placeholder-shown) ~ #label-input { 18 top: -20% !important; 19 left: 2px !important; 20 transform: scale(0.8); 21 background: white; 22 color: black; 23 padding: 0 6px; 24 opacity: 1; 25} 26 27#input { 28 transition: outline 0.2s ease; 29 font-size: 1rem; 30 outline-color: var(--button-text); 31 outline: unset; 32 border: 1px solid #bbbbbb; 33 padding: 17px 10px 10px 17px; 34 width: 100%; 35} 36 37#input:focus { 38 box-shadow: 0 0 0 1px #e8e8e8, 0 0 0 3px rgb(92, 127, 202); 39} 40 41.relative { 42 position: relative; 43} 44
1.5K views
1.5K views
MIT License