<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.