<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.