Forms & Pseudo-classes: Focus, Invalid, Required, Helper Text

intermediate

By FrontendAtlas Team · Updated Jan 30, 2026

Style form fields using :focus, :invalid, and :required to guide users. Show clear focus rings, error borders, and helper text without causing layout shifts, and make sure states are accessible (color contrast, focus visibility).

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions

<html> HTML

# CSS

/* TODOs:
  1) Add a visible focus style using :focus-visible (with :focus fallback). Use outline, not only box-shadow.
  2) Style :invalid inputs with a subtle border color change.
  3) Make ::placeholder lighter;
  highlight the label group with :focus-within.
*/
/* Plain starter (intentionally minimal so it doesn't look like the solution) */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
  background: #fafafa;
  color: #111;
}
.form {
  border: 1px solid #e5e7eb;
  /* light gray */
  padding: 12px;
  max-width: 420px;
  background: #fff;
}
label {
  display: block;
  margin-bottom: 8px;
}
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  /* subtle */
  background: #fff;
  color: inherit;
}
button {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #f9fafb;
  color: #111;
}
.hint {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  /* muted */
}

Live preview updates as you type

Building preview…