#e8e8e8
1.input-container { 2 --c-text: rgb(50, 50, 80); 3 --c-bg: rgb(252, 252, 252); 4 --c-outline: rgb(55, 45 , 190); 5 display: grid; 6 gap: 1ch; 7 position: relative; 8 max-width: 190px; 9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 10 color: black; 11} 12 13.input-field { 14 padding: 0.5em 0.75em; 15 border-radius: 0.2em; 16 border: 1px solid var(--c-border, currentColor); 17 color: var(--c-text); 18 font-size: 1rem; 19 letter-spacing: 0.1ch; 20 width: 100%; 21} 22 23.input-field:not(:placeholder-shown) + .input-label { 24 transform: translateY(-220%); 25 opacity: 1; 26} 27 28.input-field:invalid { 29 --c-border: rgb(230, 85, 60); 30 --c-text: rgb(230, 85, 60); 31 --c-outline: rgb(230, 85, 60); 32} 33 34.input-field:is(:disabled, :read-only) { 35 --c-border: rgb(150, 150, 150); 36 --c-text: rgb(170, 170, 170); 37} 38 39.input-field:is(:focus, :focus-visible) { 40 outline: 2px solid var(--c-outline); 41 outline-offset: 2px; 42} 43 44.input-label { 45 --timing: 200ms ease-in; 46 position: absolute; 47 left: 0; 48 top: 50%; 49 transition: transform var(--timing), 50 opacity var(--timing); 51 transform: translateY(-50%); 52 opacity: 0; 53 color: var(--c-text); 54 font-weight: 500; 55} 56
Comments
MIT License