Styling Forms

Form controls come with browser-specific default styles that are notoriously awkward to customise. Modern CSS makes it much easier: accent-color for quick theming, appearance: none for full control, and pseudo-classes for every state — without sacrificing accessibility.

A consistent base

Start by making controls inherit the page font (font: inherit) — they don't by default — and give them consistent padding, borders and a clear focus style.

accent-color: quick theming

One property recolours checkboxes, radio buttons, range sliders and progress bars, keeping all their native behaviour and accessibility.

Custom checkboxes with appearance: none

.check {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #b9c2d4;
  border-radius: 6px;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.check::before {
  content: "";
  width: 12px;
  height: 12px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  background: white;
  scale: 0;
  transition: scale 0.15s;
}

.check:checked {
  background: #2ec27e;
  border-color: #2ec27e;
}

.check:checked::before { scale: 1; }
.check:focus-visible { outline: 3px solid #b8d3f5; outline-offset: 2px; }

Result

appearance: none removes the native look so you can draw your own, while the element remains a real checkbox: it still works with the keyboard, labels and screen readers. Always restyle the real input rather than hiding it behind a fake one.

Toggle switches

.switch {
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #b9c2d4;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.2s;
}

.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: translate 0.2s;
}

.switch:checked { background: #1a5fb4; }
.switch:checked::before { translate: 20px 0; }
.switch:focus-visible { outline: 3px solid #b8d3f5; outline-offset: 2px; }

Result

role="switch" tells screen readers to announce it as on/off rather than checked/unchecked.

Styling selects and file inputs

.select {
  appearance: none;
  padding: 8px 32px 8px 10px;
  border: 1px solid #b9c2d4;
  border-radius: 6px;
  font: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565d72' stroke-width='2' fill='none'/%3E%3C/svg%3E")
    no-repeat right 10px center,
    white;
}

.file::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: #10131c;
  color: white;
  cursor: pointer;
}

Result

A select with appearance: none needs its own arrow (an SVG background here). ::file-selector-button styles the button inside a file input. Newer browsers also support fully customisable select menus with appearance: base-select.

Validation states

:user-invalid only matches after the user has interacted with a field, and :has() lets the field's wrapper reveal an error message — no JavaScript needed for the basics.

Placeholders and autofill

CSS details.css

::placeholder {
  color: #8a91a5;
  opacity: 1;
}

input:autofill {
  box-shadow: inset 0 0 0 100px #eef4fc;
}

textarea {
  field-sizing: content;
  min-height: 3lh;
  resize: vertical;
}

Firefox lowers placeholder opacity by default, so set opacity: 1 for consistency. :autofill styles fields filled in by the browser. field-sizing: content makes a textarea grow with its text.

Keep forms accessible

Never remove focus indicators.
Keep borders with enough contrast (3:1) so fields are recognisable.
Make click targets large — style the label, not just the tiny input.
Don't rely on colour alone for errors; add a message.

Try it yourself

.newsletter {
  display: flex;
  gap: 6px;
  max-width: 380px;
  padding: 6px;
  border: 2px solid #dce1ea;
  border-radius: 999px;
}

.newsletter:focus-within { border-color: #d6336c; }

.newsletter input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  background: transparent;
}

.newsletter input:focus { outline: none; }

.newsletter button {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: #d6336c;
  color: white;
  font: inherit;
}

Result

PreviousDark Mode & Themes NextAccessible CSS