Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- In Codepen, the HTML starts after the opening body tag. -->
<a href="#main">skip to main content</a>
<!-- logo / page navigation etc. goes here -->
<header>
  <!-- the banner role is mapped to <header> when the element is not within a <section> or <article> element, i.e. when <header> is scoped to the <body> element http://html5doctor.com/the-header-element/ -->
  <h1>StartSpace Membership Application</h1>
</header>
<main id="main">
  <p>Pre-amble text is needed here for when users arrive here directly ...</p>
  <details open>
    <!-- https://design-system.service.gov.uk/components/details/ -->
    <summary>To navigate this prototype</summary>
    <pre style="white-space: normal;" class="details__text">Press a submit button to proceed forward. Back links are visible from step 2 onward. Because pens in Codepen are in <em>"frames"</em>, these buttons and links are set to <strong>open in a new browser window</strong>.</pre>
  </details>

  <form autocomplete="on" autocorrect="off" spellcheck="false" novalidate method="get" target="_blank" action="/vfowler/pen/yLNPNLp">
    <!-- hidden inputs for token, session variables, etc ... -->
    <h2>Personal details</h2>
    <div class="form-group">
      <!-- When using the required attribute on form controls, add aria-invalid="false" so most screen readers won't default to announce as invalid ... https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/ -->
      <label for="firstName">
        <span class="field-label">Given name</span>
        <span class="field-error"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Enter your given name</span>
      </label>
      <input name="firstName" id="firstName" value="Sarah" type="text" autocomplete="given-name" required aria-invalid="false" size="30" />
    </div>
    <div class="form-group">
      <label for="lastName">
        <span class="field-label">Family name</span>
        <span class="field-error"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Enter your family name</span>
      </label>
      <input size="30" name="lastName" id="lastName" value="Phillips" type="text" autocomplete="family-name" required aria-invalid="false" />
    </div>

    <div class="form-group">
      <label for="email_address">
        <span class="field-label">Email</span>
        <span class="field-hint">A confirmation will be sent to your email address.</span>
        <!-- https://design-system.service.gov.uk/patterns/email-addresses/#if-the-email-address-is-not-in-the-correct-format-and-there-is-no-example -->
        <span class="field-error"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Enter an email address in the correct format, like name@example.com</span>
      </label>
      <input size="30" name="email_address" id="email_address" value="sarah.phillips@example.com" type="email" class="form-control contact-group" autocomplete="email" required aria-invalid="false" />
    </div>
    <div class="form-group">
      <label id="primary_phone_label" for="primary_phone">
        <span class="field-label">Phone</span>
        <span class="field-error"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Enter your phone number</span>
      </label>
      <input id="primary_phone" name="primary_phone" value="0412 345 678" type="tel" class="form-control contact-group" autocomplete="tel" maxlength="20" required aria-invalid="false" />
    </div>
    <div class="form-group">
      <label id="postcode_label" for="postcode">
        <span class="field-label">Postcode</span>
        <span class="field-error"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Postcode must be a number, like 3000</span>
      </label>
      <input id="postcode" name="postcode" value="3456" type="text" autocomplete="postal-code" pattern="[0-9]*" inputmode="numeric" minlength="3" maxlength="4" required aria-invalid="false" />
    </div>

    <!-- Fieldsets that contain radios need a programmatic association. https://russmaxdesign.github.io/accessible-error-fieldset/index.html -->
    <fieldset aria-invalid="true" aria-describedby="radio_error_1">
      <legend>
        <h3>Age</h3>
        <span id="age_hint" class="field-hint">StartSpace aims to ensure member representation across various age
          ranges and stages in life.</span>
        <span class="field-error" id="radio_error_1">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Select
          your age</span>
      </legend>
      <div class="form-group">
        <label for="age_1">
          <input id="age_1" type="radio" name="age_range" value="18-19" aria-describedby="age_choice_label age_hint" required aria-invalid="false">
          <span>18 — 19</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_2">
          <input id="age_2" type="radio" name="age_range" value="20-24" aria-describedby="age_choice_label age_hint">
          <span>20 — 24</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_3">
          <input id="age_3" type="radio" name="age_range" value="25-29" aria-describedby="age_choice_label age_hint">
          <span>25 — 29</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_4">
          <input id="age_4" type="radio" name="age_range" value="30-34" aria-describedby="age_choice_label age_hint">
          <span>30 — 34</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_5">
          <input id="age_5" type="radio" name="age_range" value="35-39" aria-describedby="age_choice_label age_hint">
          <span>35 — 39</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_6">
          <input id="age_6" type="radio" name="age_range" value="40-44" aria-describedby="age_choice_label age_hint">
          <span>40 — 44</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_7">
          <input id="age_7" type="radio" name="age_range" value="45-49" aria-describedby="age_choice_label age_hint">
          <span>45 — 49</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_8">
          <input id="age_8" type="radio" name="age_range" value="50-54" aria-describedby="age_choice_label age_hint">
          <span>50 — 54</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_9">
          <input id="age_9" type="radio" name="age_range" value="55-59" aria-describedby="age_choice_label age_hint">
          <span>55 — 59</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_10">
          <input id="age_10" type="radio" name="age_range" value="60-64" aria-describedby="age_choice_label age_hint" checked>
          <span>60 — 64</span>
        </label>
      </div>
      <div class="form-group">
        <label for="age_11">
          <input id="age_11" type="radio" name="age_range" value="65+" aria-describedby="age_choice_label age_hint">
          <span>65+</span></label>
      </div>
    </fieldset>

    <fieldset aria-invalid="true" aria-describedby="radio_error_2">
      <legend>
        <h3>Gender</h3>
        <span class="field-error" id="radio_error_2">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Select
          your gender</span>
      </legend>
      <div class="form-group">
        <label for="gender_1">
          <input id="gender_1" type="radio" name="gender" value="Woman" required aria-invalid="false" checked>
          <span>Woman</span>
        </label>
      </div>
      <div class="form-group">
        <label for="gender_2">
          <input id="gender_2" type="radio" name="gender" value="Man" required aria-invalid="false">
          <span>Man</span>
        </label>
      </div>
      <div class="form-group panel-control">
        <label for="gender_3">
          <input id="gender_3" type="radio" name="gender" value="Self-described" required aria-invalid="false">
          <span>Self-described (please specify)
            <i class="icon-arrow-down" aria-hidden="true"></i><i class="icon-arrow-up" hidden aria-hidden="true"></i>
          </span>
        </label>

        <div class="form-group hidden-all" id="gender_3_panel">
          <!-- https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content -->
          <label for="gender_3_text">Your gender</label>
          <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete -->
          <input id="gender_3_text" name="gender_3_text" type="text" autocomplete="sex">
        </div>

      </div>
    </fieldset>

    <fieldset aria-invalid="true" aria-describedby="radio_error_3">
      <legend>
        <h3>What pronouns do you use?</h3>
        <span class="field-error" id="radio_error_3">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Select
          pronouns you use</span>
      </legend>
      <div class="form-group">
        <label for="pronoun_1">
          <input id="pronoun_1" type="radio" name="pronoun" value="She/her" required aria-invalid="false">
          <span>She/her</span></label>
      </div>
      <div class="form-group">
        <label for="pronoun_2"><input id="pronoun_2" type="radio" name="pronoun" value="He/him" required aria-invalid="false">
          <span>He/him</span></label>
      </div>
      <div class="form-group">
        <label for="pronoun_3"><input id="pronoun_3" type="radio" name="pronoun" value="They/them" required aria-invalid="false" checked>
          <span>They/them</span></label>
      </div>
      <div class="form-group panel-control">
        <label for="pronoun_4"><input id="pronoun_4" type="radio" name="pronoun" value="Self-described" required aria-invalid="false">
          <span>Self-described (please specify)
            <i class="icon-arrow-down" aria-hidden="true"></i><i class="icon-arrow-up" hidden aria-hidden="true"></i>
          </span>
        </label>

        <div class="form-group hidden-all" id="pronoun_4_panel">
          <!-- https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content -->
          <label for="pronoun_4_text">Pronouns you use</label>
          <input id="pronoun_4_text" name="pronoun_4_text" type="text">
        </div>

      </div>
    </fieldset>

    <fieldset>
      <legend>
        <h3>Do you identify as Aboriginal or Torres Strait Islander?</h3>
      </legend>
      <div class="form-group">
        <label for="ati_1" class="checkbox">
          <input id="ati_1" type="checkbox" name="Aboriginal" value="1">
          <span class="control-indicator">Aboriginal</span></label>
      </div>
      <div class="form-group">
        <label for="ati_2"><input id="ati_2" type="checkbox" name="Torres Strait Islander" value="1" checked>
          <span>Torres Strait Islander</span></label>
      </div>
    </fieldset>
    <fieldset>
      <legend>
        <h3>Do you identify as Culturally and Linguistically Diverse (CALD)?</h3>
        <span id="cald_hint" class="field-hint">StartSpace aims to ensure member diversity across cultural and
          linguistic backgrounds.</span>
      </legend>

      <div class="form-group">
        <label for="cald_1"><input id="cald_1" type="checkbox" name="Culturally and Linguistically Diverse" value="1" aria-describedby="cald_hint" checked>
          <span>Culturally and Linguistically Diverse (CALD)</span></label>
      </div>
    </fieldset>

    <div class="form-group">
      <label for="access_requirements">
        <span class="field-label">Do you have any access requirements that you would like us to be aware of?</span>
      </label>
      <!-- https://design-system.service.gov.uk/components/textarea/ -->
      <textarea id="access_requirements" name="access_requirements" rows="5" spellcheck="true">Nam id ligula a nunc accumsan blandit ut tempor enim. Duis rhoncus orci leo, sit amet tincidunt sem semper at.</textarea>
    </div>

    <fieldset aria-invalid="true" aria-describedby="radio_error_4">
      <legend>
        <h3>What is your highest level of education?</h3>
        <span id="edu_hint" class="field-hint">StartSpace aims to remove educational barriers to the startup and small
          business ecosystem.</span>
        <span class="field-error" id="radio_error_4">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/error.svg" alt="Error: " class="icon" />Select
          your highest level of education</span>
      </legend>

      <div class="form-group">
        <label for="edu_1"><input id="edu_1" type="radio" name="edu_level" value="Year 11 or below (includes Cert I/II)" aria-describedby="edu_hint" required aria-invalid="false">
          <span>Year 11 or below (includes Cert I/II)</span></label>
      </div>
      <div class="form-group">
        <label for="edu_2"><input id="edu_2" type="radio" name="edu_level" value="Year 12" aria-describedby="edu_hint">
          <span>Year 12</span></label>
      </div>
      <div class="form-group">
        <label for="edu_3"><input id="edu_3" type="radio" name="edu_level" value="Cert III/IV" aria-describedby="edu_hint">
          <span>Cert III/IV</span></label>
      </div>
      <div class="form-group">
        <label for="edu_4"><input id="edu_4" type="radio" name="edu_level" value="Diploma or Advanced Diploma" aria-describedby="edu_hint">
          <span>Diploma or Advanced Diploma</span></label>
      </div>
      <div class="form-group">
        <label for="edu_5"><input id="edu_5" type="radio" name="edu_level" value="Bachelor Degree" aria-describedby="edu_hint">
          <span>Bachelor Degree</span></label>
      </div>
      <div class="form-group">
        <label for="edu_6"><input id="edu_6" type="radio" name="edu_level" value="Graduate Diploma or Graduate Certificate" aria-describedby="edu_hint" checked>
          <span>Graduate Diploma or Graduate Certificate</span></label>
      </div>
      <div class="form-group">
        <label for="edu_7"><input id="edu_7" type="radio" name="edu_level" value="Postgraduate Degree" aria-describedby="edu_hint">
          <span>Postgraduate Degree</span></label>
      </div>

      <!-- Because "Prefer not to say" is different, use a text divider to distinguish it - https://design-system.service.gov.uk/components/radios/#radio-items-with-a-text-divider -->
      <div class="radios__divider">or</div>

      <div class="form-group">
        <label for="edu_8"><input id="edu_8" type="radio" name="edu_level" value="Prefer not to say" aria-describedby="edu_hint">
          <span>Prefer not to say</span></label>
      </div>
    </fieldset>

    <div class="form-group">
      <label for="coworking_space_member">
        <span class="field-label">Have you ever been a member of a coworking space? If so please provide
          details.</span>
      </label>
      <!-- https://design-system.service.gov.uk/components/textarea/ -->
      <textarea id="coworking_space_member" name="coworking_space_member" rows="5" spellcheck="true"></textarea>
    </div>

    <div class="form-group">
      <label for="incubator_accelerator_program">
        <span class="field-label">Have you ever been part of an incubator or accelerator program or course? If so
          please specify program and year.</span>
      </label>
      <!-- https://design-system.service.gov.uk/components/textarea/ -->
      <textarea id="incubator_accelerator_program" name="incubator_accelerator_program" rows="5" spellcheck="true"></textarea>
    </div>

    <div class="form-group">
      <!-- https://design-system.service.gov.uk/components/button/ -->
      <button type="submit">Save and continue</button>
    </div>

  </form>
</main>

<!-- When presenting the next step, provide option for users to save their data and return later. Provide them a link to resume form completion. Users may need time to prepare responses to the following questions. Consider allowing them to print or email the list of questions too. -->
              
            
!

CSS

              
                /* In case you are not sure what :root matches, in HTML it’s the same as html but with a higher specificity. https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ */
:root {
  /* https://medium.com/swlh/colour-variable-names-that-scale-28663ae04052 */

  /* palette https://toolness.github.io/accessible-color-matrix/?n=white&n=Emperor&n=Thunderbird&n=Science%20Blue&n=Yellow%20Orange&n=Fun%20Green&v=FFFFFF&v=535353&v=B61D14&v=0074D9&v=FFBF47&v=00703C includes color names derived from http://chir.ag/projects/name-that-color/ */
  --palette-white: #fff;
  --palette-emperor: #535353;
  --palette-thunderbird: #b61d14;
  --palette-science-blue: #0074d9;
  /* gradient variations via https://copypalette.app/ or https://colors.eva.design ? */
  --palette-science-blue600: #0059ba; /* via https://colors.eva.design/ */
  --palette-science-blue700: #00429c; /* via https://colors.eva.design/ */
  --palette-yellow-orange: #ffbf47;
  --palette-fun-green: #00703c;

  /*   --palette-mine-shaft: #222; */
  --palette-cod-gray: #121212;
  --palette-school-bus-yellow: #ffdd00;

  /* functional */
  --bodyBackground: var(
    --palette-white,
    #fff
  ); /* WARNING: If this is not white (eg #f5f5f5), other colours may fail to provide sufficient contrast. */
  --successColor: var(--palette-fun-green, #00703c);
  --dangerColor: var(
    --palette-thunderbird,
    #b61d14
  ); /* #B61D14 on white has a contrast ratio of more than 7:1 and, with at least 19px bold font (or 24px without bold) passes direct sunlight on a phone/screen simulation http://whocanuse.com/?b=FFFFFF&c=b61d14&f=19&s=b */
  --focusColor: var(
    --palette-yellow-orange,
    #ffbf47
  ); /* use for :focus indicator on texty inputs */
  --bodyForegroundColor: var(--palette-cod-gray);
  --minGrey: var(
    --palette-emperor,
    #535353
  ); /* #535353 is a minimum grey on white background for content to pass AA and AAA for a contrast ratio of more than 7:1 at any size and passes direct sunlight on a phone/screen simulation http://whocanuse.com/?b=FFFFFF&c=535353&f=20&s= */
  --uiGrey: #81909c; /* Do not use for text content as it lacks contrast. Use for user interface elements such as dividers */

  --btnPrimaryColor: var(
    --palette-science-blue,
    #0074d9
  ); /* On white has a 4.67:1 contrast ratio  */
  /* gradients from a base colour via https://copypalette.app/ */
  --btnPrimary600: var(--palette-science-blue600, #0059ba);
  --btnPrimary700: var(--palette-science-blue700, #00429c);
  --btnPrimaryTextColor: var(--bodyBackground, #fff);
  --btnSecondaryTextColor: var(--bodyForegroundColor, #000);
  --btnSecondary400: #f4f4f4;
  --btnSecondaryMid: #e2e2e2;
  --btnSecondary600: #d0d0d0;

  --checkableSize: calc(1em + 1vw);
  --borderWidth: 0.1em;
  --borderRadius: 4px;

  --baseFontSize: calc(1rem + 0.5vw);
  /* ... see chapter The Document at 8% mark in Inclusive Design Patterns */
  /* updated based on https://every-layout.dev/rudiments/units/#viewport-units */
  font-size: var(--baseFontSize);

  --largerFontSize: calc(
    1.25 * var(--baseFontSize)
  ); /* Bumps a font-size of 20px to 24px: a threshold to push borderline text contrast from AA to AAA in many situations */
  --smallerFontSize: calc(0.8 * var(--baseFontSize));

  --lineHeight: 1.5;
  --formElementsLineHeight: 1.38889;

  /* https://stackoverflow.com/questions/10393462/placing-unicode-character-in-css-content-value#10393517 and https://www.key-shortcut.com/en/writing-systems/35-symbols/arrows/ */
  --prototypeRightArrowIcon: "\0020\2192\0020";
  --prototypeLeftArrowIcon: "\0020\2190\0020";

  --transitionDurationTimingProperties: 0.3s ease all;
}

/* See Universal Box Sizing with Inheritance under https://css-tricks.com/box-sizing/#article-header-id-3 */
html {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  color: var(--bodyForegroundColor);
  background-color: var(--bodyBackground);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
}
/* Skip links should not appear visually by default because they have very limited utility to mouse and touch users and would only serve to confound them. To make skip links available to keyboard users, we should bring them into view on focus. The Document in Inclusive Design Patterns by Heydon Pickering */
[href="#main"],
[href="#an id with spaces is killing me"] {
  position: absolute;
  top: 0;
  right: 100%; /* moves off screen */
}
[href="#main"]:focus,
[href="#an id with spaces is killing me"]:focus {
  right: auto;
}

/* If you are opening a new window, tell the user. https://adrianroselli.com/2020/02/link-targets-and-3-2-5.html#CSS */
a[target^="_"]:after {
  content: " (opens in new window/tab)";
}
details summary {
  /* make it obvious that the summary is clickable */
  text-decoration: underline;
  cursor: pointer;
  color: var(--btnPrimaryColor);
}
details .details__text {
  padding: 1em;
  border-left: var(--borderWidth) solid var(--uiGrey);
  margin-left: calc(2 * var(--borderWidth));
}

/* utility classes */
.visuallyhidden,
[type="radio"],
[type="checkbox"] {
  /* Accessible "Read More" Links https://codepen.io/svinkle/pen/Jmlbw needed for all the Change ... links in Check your answers steps. */
  /* HTML5 Boilerplate accessible hidden styles */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* media queries */
@media screen and (min-width: 37.5em) {
  body {
    /* on wider screens centre the body with margin on both sides */
    margin: 0 10%;
  }
  [type="button"],
  [type="submit"] {
    /* instead of 100% width button on narrow screens, on wider screens make buttons natural width and make button text easier to read */
    width: auto;
    line-height: var(--formElementsLineHeight, 1.38889);
  }
  button:not(:last-of-type) {
    /* all buttons except the last need right margin to push space between it and adjacent buttons */
    margin-right: 1em;
  }
}
@media (max-width: 60em) {
  :root {
    font-size: calc(0.8em + 1vw);
  }
}

main {
  /* Set a measure for the longest paragraph line. Inclusive Design Patterns */
  max-width: 36em;
}
p {
  /* Basic typography from Inclusive Design Patterns */
  margin: 1.5rem 0;
  font-size: var(--baseFontSize);
  line-height: var(--lineHeight, 1.5);
}
p,
pre {
  /* Basic typography from Inclusive Design Patterns */
  max-width: 60ch;
}

fieldset,
fieldset + .form-group,
.form-group + .form-group {
  /* fieldset, form-group, adjacent form-groups need breathing space above and below */
  margin: 1em 0;
  border-radius: var(--borderRadius); /* soften the corners */
  border-width: calc(2 * var(--borderWidth));
}
legend h2,
legend h3,
.field-label {
  /* Treat legend headings and label elements visually the same */
  font-size: var(--largerFontSize);
  line-height: var(
    --formElementsLineHeight,
    1.38889
  ); /* labels aren't body text, and I hope this means we can use less than the 1.5 line-height without compromising accessibility.  */
  display: block; /* most labels should appear on their own line */
  margin: 0; /* legend headings don't need top & bottom margin */
}

label[for] {
  cursor: pointer; /* This strays from standards as described in https://adamsilver.io/articles/buttons-shouldnt-have-a-hand-cursor-part-2/ but helps mouse users realise they can click anywhere on the label. Adopted from https://boilerform-patterns.hankchizljaw.com/#group-label */
  font-feature-settings: "tnum", "ss01";
}

/* Accessible, pretty radio controls https://codepen.io/heydon/pen/AtlsJ  */
[type="radio"] + span,
[type="checkbox"] + span {
  display: block;
  font-size: calc(0.65 * var(--checkableSize));
  margin: calc(0.5 * var(--checkableSize)) 0;
  margin-left: calc(0.25 * var(--checkableSize));
}
[type="checkbox"] + span {
  margin: calc(0.75 * var(--checkableSize)) 0;
  margin-left: calc(0.25 * var(--checkableSize));
}
/* the basic, unchecked style */
[type="radio"] + span:before,
[type="checkbox"] + span:before {
  content: "";
  display: inline-block;
  width: var(--checkableSize);
  height: var(--checkableSize);
  vertical-align: calc(-0.25 * var(--checkableSize));
  border-radius: var(--checkableSize);
  border: calc(2 * var(--borderWidth)) solid var(--palette-white);
  box-shadow: 0 0 0 calc(2 * var(--borderWidth)) var(--bodyForegroundColor);
  margin-right: calc(0.5 * var(--checkableSize));
  transition: var(--transitionDurationTimingProperties);
}
[type="checkbox"] + span:before {
  border-radius: calc(0.1 * var(--borderRadius, 0));
}
/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before,
[type="checkbox"]:checked + span:before {
  background: var(--palette-fun-green, #00703c);
  box-shadow: 0 0 0 calc(4 * var(--borderWidth)) var(--bodyForegroundColor);
}
/* never forget focus styling */
[type="radio"]:focus + span:after,
[type="checkbox"]:focus + span:after {
  content: var(--prototypeLeftArrowIcon);
  font-size: calc(0.65 * var(--checkableSize));
}

/* Let's switch to the checkmark of http://wtfforms.com/ */
.checkbox input:checked ~ .control-indicator {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
}
.control-indicator {
}

.radios__divider {
  text-indent: calc(0.65 * var(--checkableSize));
}

input[type="radio"],
input[type="checkbox"] {
  /* make native checkboxes and radios bigger */
  width: var(--checkableSize);
  height: var(--checkableSize);
  margin: 0;
  vertical-align: bottom;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
  /* labels for these checkable input types appear inline */
  display: inline-flex; /*  */
  font-size: calc(0.65 * var(--checkableSize));
  padding: 0 calc(2 * var(--borderWidth));
}
/* Swap native checkboxes and radios for custom styled ones https://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html */

/* hover style for radio and checkbox labels */
input[type="radio"]:hover,
input[type="radio"] + label:hover,
input[type="checkbox"]:hover,
input[type="checkbox"] + label:hover {
  background-color: var(--focusColor);
  box-shadow: 0 0 calc(1 * var(--borderWidth)) calc(1 * var(--borderWidth))
    var(--focusColor);
}
/* focus style for radio and checkbox labels as well as button elements */
input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label,
button:focus {
  box-shadow: 0 0 0 calc(2 * var(--borderWidth)) var(--bodyBackground),
    0 0 calc(1 * var(--borderWidth)) calc(4 * var(--borderWidth))
      var(--focusColor);
  outline: none;
  /* https://speakerdeck.com/a11ychi/if-its-interactive-it-needs-a-focus-style-with-eric-bailey?slide=44 for high contrast mode */
  @media screen and (-ms-high-contrast: active) {
    background-color: buttonFace;
    color: window;
  }
}

/* set input width to guide sighted users https://vfowler.com/input-width-to-guide-sighted-users/ */
input[maxlength="4"] {
  /* Set a width based on maxlength + padding + breathing space + border */
  width: calc(4ch + 2ch + 1ch + var(--borderWidth));
}
input[maxlength="20"] {
  /* Set a width based on maxlength + padding + breathing space + border */
  width: calc(20ch + 2ch + 1ch + var(--borderWidth));
}
input[type="number"][max="99"] {
  /* Set a width based on spinner buttons in desktop browsers + number of digits in max + padding + breathing space + border */
  width: calc(1ch + 2ch + 2ch + 1.5ch + var(--borderWidth, 0.1em));
}
/* For the rare use case of type=number we have on step 2 https://medium.com/@adambsilver/when-to-use-the-number-input-b24e11ec550d */
input[type="number"] {
  text-align: center;
  /* better spacing accommodation for the spinners in desktop browsers, needs !important to override the higher specificity of the following selector */
  /* button, select, textarea, input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) */
  padding-right: calc(2 * var(--borderWidth)) !important;
}

/* https://adrianroselli.com/2019/09/under-engineered-text-boxen.html */
/* added button, select to the selector to also style button elements and any select controls */
button,
select,
textarea,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  font-feature-settings: "tnum", "ss01";
  margin: calc(3 * var(--borderWidth)) 0 calc(6 * var(--borderWidth));
  padding: calc(2 * var(--borderWidth)) 1ch;
  border: var(--borderWidth) solid;
  border-radius: var(--borderRadius); /* soften the corners */
}

/* https://adrianroselli.com/2019/09/under-engineered-text-boxen.html */
textarea:focus,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):focus {
  outline: none;
  box-shadow: 0 0 calc(1 * var(--borderWidth)) calc(2 * var(--borderWidth))
    var(--focusColor);
}

textarea[required],
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"])[required] {
  /* https://adrianroselli.com/2019/09/under-engineered-text-boxen.html */
  /* mark required text fields with a thicker left border */
  border-left-width: calc(3 * var(--borderWidth));
  border-right-width: calc(1 * var(--borderWidth));
}
*[dir="rtl"] textarea[required],
*[dir="rtl"]
  input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"])[required] {
  /* In rtl languages mark required text fields with a thicker right border */
  border-left-width: calc(1 * var(--borderWidth));
  border-right-width: calc(3 * var(--borderWidth));
}

textarea[aria-invalid="true"],
textarea[aria-invalid="spelling"],
textarea[aria-invalid="grammar"],
textarea[aria-invalid] /* see note re THIS SELECTOR */,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"])[aria-invalid] {
  /* mark aria-invalid text fields with a red triangle in the upper left of the input */
  /* https://adrianroselli.com/2019/09/under-engineered-text-boxen.html */
  /* THIS SELECTOR [aria-invalid] WILL NEED CORRECTING TO [aria-invalid="true"] once validation scripting is updating the attribute to true if an input value does not pass validation. */
  background: linear-gradient(
    135deg,
    var(--dangerColor) 0,
    var(--dangerColor) calc(4 * var(--borderWidth)),
    rgba(255, 255, 255, 1) calc(4 * var(--borderWidth))
  );
}

*[dir="rtl"] textarea[aria-invalid="true"],
*[dir="rtl"] textarea[aria-invalid="spelling"],
*[dir="rtl"] textarea[aria-invalid="grammar"],
*[dir="rtl"]
  input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"])[aria-invalid] {
  /* In rtl languages mark aria-invalid text fields with a red triangle in the upper right of the input */
  background: linear-gradient(
    225deg,
    var(--dangerColor) 0,
    var(--dangerColor) calc(4 * var(--borderWidth)),
    rgba(255, 255, 255, 1) calc(4 * var(--borderWidth))
  );
}

textarea {
  width: 100%; /* initial appearance */
  max-width: 100%; /* don't let it go too wide */
  min-width: 50%; /* don't let it go too wide */
  min-height: calc(3 * var(--baseFontSize)); /* don't let it go too short */
}
[aria-expanded="true"] {
  /* Previously the selector was .form-group--conditionally-revealed but switching to the attribute selector [aria-expanded="true"] makes the class redundant, and tightens the bind with the JavaScript setAttribute function */
  /* indent and border left so this form group element appears to hang hierarchically under the radio/checkbox that toggles the revealment */
  padding-left: calc(0.5 * var(--checkableSize));
  margin-left: calc(0.9 * var(--checkableSize) - 1 * var(--borderWidth));
  border-left: var(--borderWidth) solid var(--uiGrey);
}
/* Julie Grundy's basic show/hide pattern to toggle additional input ... https://codepen.io/stringyland/pen/vYBXrGv */
.hidden-all {
  /* JavaScript show/hide pattern depends on this class */
  display: none;
}
.panel-control i {
  padding: var(--borderWidth) calc(2 * var(--borderWidth));
  color: var(--uiGrey);
}
/* Icon font stuff from here on */
@font-face {
  font-family: "icomoon";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/icomoon.ttf")
      format("truetype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/icomoon_copy.svg")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.2;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-arrow-up:before {
  content: "\ea41";
}
.icon-arrow-down:before {
  content: "\ea43";
}

.field-label {
  font-weight: 700;
}

/* hint and error styles */
[type="checkbox"] + label > .field-hint,
[type="checkbox"] + label + .field-hint,
[type="checkbox"] + span + .field-hint,
[type="radio"] + label + .field-hint,
[type="radio"] + span + .field-hint,
[type="radio"] + label > .field-hint {
  /* indent the hint to appear in line with the inline label */
  text-indent: calc(2 * var(--checkableSize));
}
.field-hint,
.field-error {
  color: var(--minGrey);
  display: block;
}
.field-error {
  color: var(--dangerColor);
}
fieldset[aria-invalid="true"] {
  border-color: var(--dangerColor);
  border-style: solid;
}
.icon {
  width: 1em;
  height: 1em;
  margin-right: 0.4ch;
  margin-bottom: -0.16em;
}

/* buttons */
.form-group + button {
  margin-top: 1em;
}
button {
  transition: var(--transitionDurationTimingProperties);
  border: none;
  border-bottom: var(--borderWidth) solid var(--minGrey);
  font-size: var(--largerFontSize);
  line-height: 1.5625;
  width: 100%;
  padding: 1rem 4ch;
  margin-bottom: 1em;
  color: var(--btnPrimaryTextColor);
  background: linear-gradient(
    to bottom,
    var(--btnPrimaryColor),
    var(--btnPrimary600)
  ); /* https://css-tricks.com/snippets/css/css-linear-gradient/ */
}
[type="submit"][formaction] {
  color: var(--btnSecondaryTextColor);
  background: linear-gradient(
    to bottom,
    var(--btnSecondaryMid),
    var(--btnSecondary600)
  );
}

/* style different states (hover, focus, active...) */
button:hover {
  background: linear-gradient(
    to bottom,
    var(--btnPrimary600),
    var(--btnPrimary700)
  );
}
[type="submit"][formaction]:hover {
  background: linear-gradient(
    to bottom,
    var(--btnSecondary400),
    var(--btnSecondaryMid)
  );
}

button:active {
  /* reverse foreground and background color on press */
  color: var(--btnPrimaryColor);
  background: var(--btnPrimaryTextColor);
}
[type="submit"][formaction]:active {
  /* reverse foreground and background color on press */
  color: var(--btnSecondaryMid);
  background: var(--btnSecondaryTextColor);
}
button[disabled],
button[aria-disabled="true"] {
  text-decoration: line-through;
  background: linear-gradient(to bottom, var(--uiGrey), var(--minGrey));
}

/* text links */
a {
  color: var(--btnPrimaryColor);
  background-color: var(--bodyBackground);
}
a[rel="prev"] {
  font-size: var(--smallerFontSize);
  border-bottom: var(--borderWidth) solid;
  text-decoration: none;
}
a[rel="prev"]:before {
  content: var(--prototypeLeftArrowIcon);
}
a:hover,
details summary:hover {
  border-bottom: none;
  text-decoration: none;
}
a:focus,
details summary:focus {
  color: var(--bodyBackground);
  background-color: var(--btnPrimaryColor);
}
a:active,
details summary:active {
  color: var(--focusColor);
  background-color: var(--bodyBackground);
}
a:visited {
  color: var(--palette-science-blue700);
}

/* summary review step styles based on https://design-system.service.gov.uk/patterns/check-answers/ */
.summaryReview h3,
.summaryReview dl {
  margin-top: 0;
  margin-bottom: var(--smallerFontSize);
}
.summaryReview dl {
  margin-bottom: calc(3 * var(--smallerFontSize));
}

.summaryReview dl {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.summaryReview dl div {
  display: table-row;
  transition: var(--transitionDurationTimingProperties);
}
.summaryReview dl div:focus-within {
  /* Inspired by https://speakerdeck.com/a11ychi/if-its-interactive-it-needs-a-focus-style-with-eric-bailey?slide=56 */
  background-color: var(--focusColor);
}
.summaryReview dl div:hover {
  background-color: var(--focusColor);
}
.summaryReview dt,
.summaryReview dd {
  display: table-cell;
  margin: 0;
  padding: calc(5 * var(--borderWidth)) 0;
  border-bottom: calc(0.5 * var(--borderWidth)) solid var(--uiGrey);
  padding-right: 1ch;
}
.summaryReview dt {
  width: 30%;
  font-weight: 700;
  padding-left: 1ch; /* guarantee at various viewport widths to give at least a little padding to separate long content butting against the adjacent dd */
}
.summaryReview dd:first-of-type {
  width: 50%;
  font-feature-settings: "ss01";
}
.summaryReview dd:last-of-type {
  width: 20%;
  text-align: right;
}

/* progress saved and confirmation step panel styles based on https://design-system.service.gov.uk/patterns/confirmation-pages/ */
.panel {
  text-align: center;
  border: calc(5 * var(--borderWidth)) solid transparent;
  font-size: var(--baseFontSize);
  line-height: var(--lineHeight, 1.5);
  padding: 1.5rem 0;
}
.panel--progress {
  color: var(--bodyForegroundColor);
  background: var(--palette-school-bus-yellow);
}
.panel--confirmation {
  color: var(--btnPrimaryTextColor);
  background: var(--successColor);
}

              
            
!

JS

              
                // For clicks to focus on buttons, you need to add this JavaScript as early as you can https://zellwk.com/blog/style-hover-focus-active-states/
document.addEventListener("click", (event) => {
  if (event.target.matches("button")) {
    event.target.focus();
  }
});

// Julie Grundy's basic show/hide pattern to toggle additional input ... https://codepen.io/stringyland/pen/vYBXrGv
const group = document.querySelector("form"); // enables any toggles inside a form

// local scope
const toggle1 = group.querySelector("#gender_3"); // selects the radio input by id */
const label1 = group.querySelector('[for="gender_3"] span'); // select the label because the icon is a child */
const panel1 = group.querySelector("#gender_3_panel");

const toggle2 = group.querySelector("#pronoun_4"); // selects the radio input by id */
const label2 = group.querySelector('[for="pronoun_4"] span'); // select the label because the icon is a child */
const panel2 = group.querySelector("#pronoun_4_panel");

// scope in from step 2 https://codepen.io/vfowler/pen/yLyozJX
const toggle3 = group.querySelector("#fOA_6"); // selects the radio input by id */
const label3 = group.querySelector('[for="fOA_6"] span'); // select the label because the icon is a child */
const panel3 = group.querySelector("#fOA_6_panel");

// Must update aria-expanded attribute as well as panel hidden-all class
toggle1.addEventListener("click", function (e) {
  if (panel1.classList.contains("hidden-all")) {
    panel1.classList.remove("hidden-all");
    panel1.setAttribute("aria-expanded", "true");
    updateIcon(label1, "up");
  } else {
    panel1.classList.add("hidden-all");
    panel1.setAttribute("aria-expanded", "false");
    updateIcon(label1, "down");
  }
});
toggle2.addEventListener("click", function (e) {
  if (panel2.classList.contains("hidden-all")) {
    panel2.classList.remove("hidden-all");
    panel2.setAttribute("aria-expanded", "true");
    updateIcon(label2, "up");
  } else {
    panel2.classList.add("hidden-all");
    panel2.setAttribute("aria-expanded", "false");
    updateIcon(label2, "down");
  }
});

// utility functions
function updateIcon(whichOne, direction) {
  if (direction === "up") {
    whichOne.children[0].setAttribute("hidden", "true");
    whichOne.children[1].removeAttribute("hidden");
  } else {
    whichOne.children[0].removeAttribute("hidden");
    whichOne.children[1].setAttribute("hidden", "true");
  }
}

              
            
!
999px

Console