<form>
  <input type="radio" class="hidden" id="step-0" name="progress" checked />
  <fieldset class="show-when-checked">
    <label for="email">Email Address</label>
    <input id="email" type="email" required />
    <label for="step-1" class="enable-when-valid">Next</label>
  </fieldset>

  <input type="radio" class="hidden" id="step-1" name="progress" />
  <fieldset class="show-when-checked">
    <label for="username">Username</label>
    <input id="username" type="text" required />
    <label for="step-0">Previous</label>
    <label for="step-2" class="enable-when-valid">Next</label>
  </fieldset>

  <input type="radio" class="hidden" id="step-2" name="progress" />
  <fieldset class="show-when-checked">
    <label for="password">Password</label>
    <input id="password" type="password" required />
    <label for="step-1">Previous</label>
    <button type="submit" class="enable-when-valid">Submit</button>
  </fieldset>

</form>

input.hidden {
  position: absolute;
  visibility: hidden;
}

input[type="radio"] + .show-when-checked {
  display: none;
}

input[type="radio"]:checked + .show-when-checked {
  display: block;
}

fieldset > .enable-when-valid {
  background-color : gray;
}
fieldset:valid > .enable-when-valid {
  background-color: white;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.