CSS Forms

Style forms that are accessible, responsive, and consistent across browsers. This page covers inputs, labels, fieldsets, focus rings, placeholders, disabled/required/invalid states, custom checkboxes & radios, selects, textareas, and layout patterns.

1) Inputs, Labels & Focus Rings


label{ font-weight: 600; }
.input{
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}
.input:focus{
  border-color: #90CAF9;
  box-shadow: 0 0 0 4px rgba(144,202,249,.25);
  outline: none;
}
We’ll never share your email.

2) Group with <fieldset> & <legend>


fieldset{ border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
legend{ font-weight: 700; color: #0f172a; }
Contact Preferences

3) Custom Checkbox, Radio & Switch


.cb{ appearance: none; border: 1.5px solid #94a3b8; }
.cb:checked{ background: #43A047; border-color: #43A047; }
.rb:checked::after{ background: #1E88E5; }

4) Selects & Input Groups


.select{
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), ...;
  padding-right: 2.5em;
}
.group:focus-within{ box-shadow: 0 0 0 4px rgba(144,202,249,.25); }
₹ INR
Use input groups for prefixes/suffixes (currency, units).

5) Textarea, Placeholder & Disabled


.textarea::placeholder{ color: #94a3b8; }
.input[disabled]{ background: #f8fafc; color: #94a3b8; }

6) Responsive Grid Layout


.grid-2{ display: grid; grid-template-columns: repeat(2,1fr); }
@media (max-width: 640px) { .grid-2{ grid-template-columns: 1fr; } }

Grid collapses to one column under 640px.

7) Required, :invalid & Error Text


.input:invalid{ border-color: #fca5a5; }
.show-errors .error{ display: block; }
Please enter a valid email address.

Tips & Accessibility:

  • Always pair inputs with <label for=> so the label is clickable.
  • Use :focus-visible (or the focus styles above) to provide a strong, accessible focus ring.
  • Indicate errors with color and text (don’t rely on color alone).
  • Use fieldset + legend to group related controls (e.g., contact methods).
  • For custom controls (checkbox/radio) ensure keyboard access & visible focus.