Default form controls look different in every browser and rarely match your design. With CSS you can make inputs clean, consistent and accessible — a skill every real project needs.
Styling inputs consistently
Inputs, textareas and selects can be styled like any box: padding, border, border-radius and font. Set <code>font: inherit</code> so they match your page typography instead of the browser default.
<label>Email<input type="email" placeholder="you@example.com"></label>label{display:block;font:inherit;color:#334155}
input{display:block;width:100%;font:inherit;padding:10px 12px;margin-top:6px;border:1px solid #cbd5e1;border-radius:8px;box-sizing:border-box}Focus states are essential
When a field is focused, users (especially keyboard users) need clear feedback. Style <code>:focus</code> with a visible ring. Never remove the outline without a replacement.
<input type="text" placeholder="Click or tab here">input{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;box-sizing:border-box;outline:none}
input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2)}Error and valid states
Use classes (or the <code>:invalid</code> pseudo-class with care) to show validation feedback — typically a red border and message for errors, green for success. Always pair colour with text or an icon, since colour alone is not accessible.
Custom controls
Checkboxes and radios are hard to style directly, so the modern technique uses <code>accent-color</code> for a quick tint, or hides the native control and styles a sibling label for full custom designs.
input[type=checkbox],
input[type=radio] {
accent-color: #2563eb;
}input:focus { outline: none; }input:focus { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }Removing the focus outline to make forms "cleaner". This locks out keyboard users. Always provide a visible focus style.
Set font: inherit and box-sizing: border-box on form controls, give every field a clear focus ring, and never rely on colour alone to show errors. Keep tap targets at least 44px tall.
Style a small form: a labelled full-width email input with padding and rounded corners, a clear focus ring, and a submit button. Add accent-color to a checkbox.
1. What makes inputs match your page font?
2. Why keep a focus ring on inputs?
3. What quickly tints a native checkbox?
- Style inputs like boxes; set font: inherit and box-sizing.
- Always give fields a clear, visible focus ring.
- Show errors with text or icons, not colour alone.
- Use accent-color to tint native checkboxes and radios.