3.1K views
CSSAdd prefixes
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} 11 12.input-field { 13 padding: 0.5em 0.75em; 14 border-radius: 0.2em; 15 border: 1px solid var(--c-border, currentColor); 16 color: var(--c-text); 17 font-size: 1rem; 18 letter-spacing: 0.1ch; 19 width: 100%; 20} 21 22.input-field:not(:placeholder-shown) + .input-label { 23 transform: translateY(-220%); 24 opacity: 1; 25} 26 27.input-field:invalid { 28 --c-border: rgb(230, 85, 60); 29 --c-text: rgb(230, 85, 60); 30 --c-outline: rgb(230, 85, 60); 31} 32 33.input-field:is(:disabled, :read-only) { 34 --c-border: rgb(150, 150, 150); 35 --c-text: rgb(170, 170, 170); 36} 37 38.input-field:is(:focus, :focus-visible) { 39 outline: 2px solid var(--c-outline); 40 outline-offset: 2px; 41} 42 43.input-label { 44 --timing: 200ms ease-in; 45 position: absolute; 46 left: 0; 47 top: 50%; 48 transition: transform var(--timing), 49 opacity var(--timing); 50 transform: translateY(-50%); 51 opacity: 0; 52 color: var(--c-text); 53 font-weight: 500; 54} 55 56@media (prefers-reduced-motion: reduce) { 57 .input-label { 58 --timing: linear; 59 } 60} 61 62@media (prefers-color-scheme: dark) { 63 .input-container { 64 --c-text: rgb(252, 252, 252); 65 --c-bg: transparent; 66 } 67}
HTML
1<p class="input-container"> 2 <input autocomplete="name" class="input-field" id="text" name="text" placeholder="Enter your name" type="text"> 3 <label for="text" class="input-label">Name</label> 4</p>