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

intermediate

By FrontendAtlas Editorial · 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).

Solution

Overview

Use :focus-visible (with a :focus fallback) to show an outline ring, :invalid to indicate errors, ::placeholder for lighter hint text, and :focus-within on the label to highlight the label+input group. The solution also applies nicer visual styling so it looks clearly different from the starter.

Approach — Focus Rings + Validation States

Add a visible outline on focus using :focus-visible (and :focus as fallback). Style :invalid to adjust the border color when constraints fail. Use ::placeholder for lighter hint text. Apply :focus-within on the label to add an outline around the group. Extra visual polish (radius, stronger button) is included here so the solution preview is obviously different than the starter.

<html>

<form class='form' onsubmit="event.preventDefault(); alert('Form submitted!');">
  <label>
    Email
    <input type='email' required placeholder='you@example.com'>
  </label>
  <small class='hint'>
    We’ll never share your email.
  </small>
  <button>
    Submit
  </button>
</form>

# CSS

/* Base + polish */
.form {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
  max-width: 420px;
}
label {
  display: block;
  margin-bottom: 8px;
  padding: 6px;
  border-radius: 8px;
}
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  color: inherit;
}
button {
  margin-top: 10px;
  background: #222;
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.hint {
  display: block;
  margin-top: 4px;
  color: #6b7280;
}
/* Accessibility & states */
input:focus-visible {
  outline: 2px solid #4c9ffe;
  outline-offset: 2px;
}
input:focus {
  outline: 2px solid #4c9ffe;
  outline-offset: 2px;
}
/* fallback */
input:invalid {
  border-color: #e63946;
}
input::placeholder {
  color: #9aa0a6;
}
label:focus-within {
  outline: 2px solid #4c9ffe;
  outline-offset: 2px;
}

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep