<div class="container">
<!-- Form for Gender Selection -->
<form id="genderForm">
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="male" required> Male</label><br>
<label><input type="radio" name="gender" value="female" required> Female</label><br>
<label><input type="radio" name="gender" value="other" required> Other</label><br>
</fieldset>
<input type="submit" value="Submit">
</form>
<!-- Form for Age Range Selection -->
<form id="ageForm">
<fieldset>
<legend>Age Range</legend>
<label><input type="radio" name="ageRange" value="18-30" required> 18-30</label><br>
<label><input type="radio" name="ageRange" value="30-45" required> 30-45</label><br>
<label><input type="radio" name="ageRange" value="45-60" required> 45-60</label><br>
<label><input type="radio" name="ageRange" value="60+" required> 60+</label><br>
</fieldset>
<input type="submit" value="Submit">
</form>
</div>
form:has(input:checked) {
border: 2px solid red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.