CSS Forms: Styling Web Forms

Forms are one of the most challenging areas of CSS because browser defaults vary wildly, native form controls resist styling, and accessibility must be preserved throughout. This module covers the complete CSS toolkit for production-ready forms.

Module Contents

Page	What You'll Learn
Input and Textarea Styling	Text fields, focus states, placeholders, sizes
Custom Checkboxes and Radios	Pure CSS custom controls
Custom Select and File	Select dropdowns, file upload buttons
Form Validation States	:valid/:invalid, error messages, inline feedback
WordPress Form CSS	Contact Form 7, WPForms, WooCommerce checkout

The Form CSS Philosophy

1. Never remove :focus outlines without providing a clear visible alternative.
2. Use appearance: none to reset browser defaults before styling.
3. Size targets correctly — min 44×44px tap area on touch devices.
4. Validation states are UX — users need immediate visual feedback.
5. Design tokens first — form colors should come from your :root variables.

The Universal Form Reset

Add this to your CSS reset for consistent cross-browser form behavior:

/* Form reset — paste at the top of your form CSS */
input,
textarea,
select,
button {
  font-family: inherit;      /* Use body font, not system default */
  font-size: inherit;        /* Don't shrink to browser 13.333px default */
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;  /* Remove iOS/macOS glossy styles */
  appearance: none;
}

/* Remove number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { display: none; }

/* Remove search input decorations */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { display: none; }