Radio button issue - selection disappearing while clicking outside


I’ve created a radio button group and its working perfectly except, when we click on a radio button it shows the selection but when we click outside of the radio button that selection is disappearing. Can anyone help me to solve this?

Link to codepen >

If you click on the down arrow for the HTML panel, and select Analyze HTML, you’ll see it says you’re missing a start <div> tag. I don’t know if this is what is causing the problem, but it would be worth fixing…

You need to use :checked not :focus here. (:focus is transient only.)

  .c-form__checkbox:checked + .r-form__label .c-form__checkbox-square,
  .r-form__radio:checked + .r-form__label .r-form__radio-circle {
    stroke: #31CC89;
    fill: #31CC89;
1 Like

I think there’s just an extra closing tag right at the end that shouldn’t be there for that snippet :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.