v141 · css

Wizard Progress

A multi-step form wizard where :target-before turns completed steps green, :target-current highlights the active step, and :target-after dims upcoming steps — pure CSS, zero JavaScript state management.

Feature detection: checking…
Account registration — 4 steps
1 Account 2 Profile 3 Preferences 4 Review

Step 1 — Account details

← Back Next: Profile →

Step 2 — Profile information

← Back Next: Preferences →

Step 3 — Preferences

← Back Next: Review →

Step 4 — Review & confirm

  • Email you@example.com
  • Username cooldev42
  • Name Ada Lovelace
  • Job title Software engineer
  • Theme System default
  • Notifications All
← Back ✓ Create account 
/* scroll-marker-group turns sibling anchors into a group */
.progress-strip { scroll-marker-group: before; }

/* Completed steps */
.step-indicator:target-before .step-dot {
  background: var(--accent-emerald);
  color: white;
}

/* Active step */
.step-indicator:target-current {
  background: var(--bg-paper);
  font-weight: 700;
}

/* Upcoming steps */
.step-indicator:target-after {
  opacity: 0.5;
}

see also