Styling real, accessible forms

The HTML series' own forms coverage built a genuinely accessible checkout form — real labels, real fieldsets, real aria-describedby error messages. This part styles that exact form, with one real, consistent rule guiding every decision: nothing here should undo the accessibility work already in the markup.

Consistent, real input sizing

input,
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
}

font-family: inherit is a real, easy-to-miss detail — form elements don't inherit the page's font by default in every browser, so without this line, inputs can render in a jarring, mismatched system font while the rest of the page uses Bright Leaf Coffee's real chosen typeface from part 6. font-size: var(--text-base) matters for a second, real reason beyond visual consistency: a font-size below 16px on an input causes real, unwanted automatic zooming on iOS Safari when a visitor taps into the field.

Real, visible focus states — never removed, only redesigned

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

This directly continues part 7's outline guidance — every focusable form element keeps a real, clearly visible focus indicator, styled to match Bright Leaf Coffee's own accent color rather than the browser's generic default blue, but never removed outright. :focus-visible specifically (rather than plain :focus, covered in part 17) applies this styling primarily for real keyboard navigation, without an unnecessary outline appearing on every mouse click.

Real error styling that doesn't rely on color alone

input[aria-invalid="true"] {
  border-color: #d64545;
  border-width: 2px;
}

.field-error {
  color: #d64545;
  font-size: var(--text-sm);
  margin-top: 0.25rem;
}

.field-error::before {
  content: "⚠ ";
}

This directly honors the real accessibility concern flagged in the HTML series' own forms deep dive: a red border color communicates the error visually, but the real aria-describedby-linked error text (styled here, not just present in the markup) is what actually conveys the error to a screen reader. The ::before pseudo-element (covered fully in part 17) adds a real, visible warning symbol too — a second, non-color-dependent visual cue for a visitor with color blindness who might not clearly perceive the red border alone.

Real fieldset and legend styling

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

legend {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  padding: 0;
}

Browsers apply a real, often visually heavy default border and padding to <fieldset> — removing it here (border: none) is a purely visual choice; the real, semantic grouping behavior <fieldset> and <legend> provide for screen readers is entirely independent of how they're visually styled, so this real reset doesn't touch that underlying accessibility benefit at all.

Custom checkbox and radio styling: a real, genuine trade-off

input[type="radio"] {
  accent-color: var(--color-accent);
}

accent-color is a real, modern, low-effort way to recolor native checkboxes and radio buttons to match Bright Leaf Coffee's real brand color, while keeping the browser's own native, fully-accessible checkbox and radio implementation completely intact. Building a fully custom checkbox from scratch (hiding the real input, styling a fake replacement) is possible, but it's a real, genuine trade-off — every bit of native keyboard and screen reader behavior has to be manually reimplemented correctly, which accent-color gets for free.

Next: transitions and animations — real, tasteful micro-interactions for Bright Leaf Coffee's actual buttons and cards, done with genuine restraint.