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/
CodePudding user response:
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.