Form reset
Make form controls inherit your font and color — consistent across every browser and OS.
Quick implementation
/* Inherit document font and color in all form controls */
input, button, textarea, select {
font: inherit;
color: inherit;
}
/* Buttons should look clickable by default */
button {
cursor: pointer;
}
/* Textarea: only allow vertical resize to avoid layout breakage */
textarea {
resize: vertical;
}
/* Remove default appearance to enable consistent custom styling */
input, textarea, select {
appearance: none;
background-color: transparent;
border: 1px solid currentColor;
border-radius: 0;
padding: 0.5rem 0.75rem;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a design system with consistent form styling.
Goal: Write a CSS form reset that removes browser-specific defaults and creates a clean base for custom form styles — no JavaScript.
Technical constraints:
- Apply font: inherit and color: inherit to input, button, textarea, select — browsers do not inherit these by default.
- Set cursor: pointer on button elements.
- Restrict textarea resize to vertical only to prevent layout breakage.
- Use appearance: none to remove OS-specific widget styling on inputs and selects.
- Do not set a specific color or background — this is a reset, not a theme. Use oklch() in any demo context only.
- Keep the selector list minimal — do not target every input type individually.
Framework variant (pick one):
A) Standalone reset — a focused form-reset.css to import before component styles.
B) @layer integration — wrap in @layer reset { ... } as the lowest-priority layer.
Edge cases to handle:
- input[type="checkbox"] and input[type="radio"] should be excluded from appearance: none since that removes their visual state entirely — use :not([type="checkbox"]):not([type="radio"]) or a separate selector.
- input[type="file"] appearance: none hides the button in some browsers — exclude it or test carefully.
- Select elements with appearance: none lose their dropdown arrow — you must provide a custom one via background-image or a pseudo-element wrapper.
- The font: inherit fix is also needed for <fieldset> and <legend> in some older browsers — include them.
Return CSS only.Why this matters in 2026
Form elements are the last holdouts of browser-specific default styling. Every browser ships with its own font-family, font-size, and color scheme for <input>, <select>, and <button>. Without a reset, a paragraph next to a text input uses your design system font while the input uses the OS system font — a jarring mismatch that undermines polish. The two lines font: inherit and color: inherit fix 90% of this with zero visual regressions.
The logic
The font shorthand sets font-family, font-size, font-weight, line-height, and font-style all at once. Setting it to inherit pulls all of these values from the nearest ancestor — typically body — giving form elements the same typography as the rest of the page. color: inherit does the same for text color, which browsers also do not inherit on form controls by default.
resize: vertical on textarea prevents horizontal resize from breaking adjacent layout columns. appearance: none removes OS-rendered widget chrome on inputs and selects, giving you a blank canvas for borders, backgrounds, and focus rings.
Accessibility & performance
Do not remove the focus ring without replacing it. After a form reset, the browser's default :focus outline may still appear — but on some browsers, appearance: none can suppress it. Always add an explicit :focus-visible style: outline: 2px solid oklch(0.72 0.19 265); outline-offset: 2px;. This ensures keyboard users can see where focus is. The reset itself has no layout or paint cost — it runs at style computation time only.