Forms and Controls

Style native inputs, buttons, validation, and focus without breaking their behavior.

更新于 2026年8月13日适用于 Modern CSS

Native controls vary across browsers because they integrate with the operating system. Normalize only what the design needs and preserve familiar behavior.

Shared control foundations

forms.css

01button, input, select, textarea { font: inherit; color: inherit; }
02input, select, textarea {
03  min-height: 2.75rem;
04  padding: 0.65rem 0.8rem;
05  border: 1px solid #c9c1cd;
06  border-radius: 0.45rem;
07  background: canvas;
08}
09:is(input, select, textarea, button):focus-visible {
10  outline: 3px solid #f46537;
11  outline-offset: 2px;
12}

Validation and disabled states

states.css

01input:user-invalid { border-color: #b42318; }
02button:disabled { opacity: 0.55; cursor: not-allowed; }
03textarea { resize: vertical; min-height: 8rem; }

Do not communicate validity through color alone. Pair visual state with connected error text. Keep disabled controls legible and avoid disabling submit before explaining why.

Keep this

Preserve native semantics, size touch targets generously, style every state, and test keyboard and mobile input.