Default form controls look dated, but replacing them badly destroys accessibility. Here is the modern middle path.
The polished input recipe
input, textarea, select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
font: inherit; /* forms don't inherit fonts by default! */
transition: border-color .15s, box-shadow .15s;
}
input:focus {
outline: none;
border-color: #6d6ffb;
box-shadow: 0 0 0 3px rgba(109,111,251,.2); /* visible focus ring */
}The one-line checkbox win
input[type="checkbox"], input[type="radio"], input[type="range"] {
accent-color: #6d6ffb; /* brand-colored controls, zero hacks */
}Validation states
input:user-invalid { border-color: #ef4444; } /* only after interaction */
input:user-valid { border-color: #22c55e; }Accessibility non-negotiables
- Never remove focus styles without replacing them
- Keep real
<label for>— placeholder is not a label - 4.5:1 contrast on input text and error messages