Styling Forms with CSS
Learn how to override default browser form styles, create polished inputs, style buttons with hover/active/disabled states, and use accent-color for checkboxes.
Why forms look different on every browser
If you've ever built a form and noticed it looks different on Chrome, Firefox, Safari, and Edge, you're not alone. Form elements are among the hardest things to style consistently in CSS. Here's why.
Form elements like <input>, <select>, <textarea>, and <button> are what CSS specifications call replaced elements (or more precisely, elements with native rendering). Unlike a <div> or <p> that the browser renders entirely using its CSS engine, form elements are partially rendered by the operating system itself. That's why a checkbox on macOS looks different from a checkbox on Windows — each OS draws them in its native style.
The CSS property appearance: none strips away the browser's default styling, giving you a blank canvas to style from scratch:
input, select, textarea { appearance: none; }
After resetting with appearance: none, the element still functions the same (you can still type in it, click it, submit data), but it looks like a plain rectangle that you can style however you want.
Another common reset is normalizing fonts. By default, form elements don't inherit the page's font — they use the system font. Adding font: inherit; fixes this:
input, select, textarea, button { font: inherit; }
This single line makes form elements match the rest of your page's typography, which is usually what you want.
appearance property was introduced to give developers control over this behavior. With appearance: none, the element's native look is removed, allowing full CSS customization. This is now well-supported across all modern browsers.