Search code examples
htmlcssradio-button

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 jsfiddle https://jsfiddle.net/viveknath322/evzsn8y6/
Solution

  • I think what you are looking for is using the ":checked" attribute instead of the ":focus" attribute used currently.

    Change

    .c-form__checkbox:focus + .r-form__label .c-form__checkbox-square,
.r-form__radio:focus + .r-form__label .r-form__radio-circle {
  stroke: #31CC89;
  fill: #31CC89;
}

    to

    .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;
}

    Focus causes to be not triggered anymore as soon as you click outside the radio button, as you are then focusing on another element.