单选按钮问题 - 在外部单击时选择消失

Question

我已经创建了一个单选按钮组并且它的工作非常完美，除了当我们点击一个单选按钮时它会显示选择但是当我们在单选按钮外部单击时选择消失。谁能帮我解决这个问题？

Link to jsfiddle https://jsfiddle.net/viveknath322/evzsn8y6/

Answer 1

我认为您正在寻找的是使用“:checked”属性而不是当前使用的“:focus”属性。

改变

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

至

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

一旦您在单选按钮外单击，焦点将不再触发，因为您随后将焦点放在另一个元素上。

单选按钮问题 - 在外部单击时选择消失

Radio button issue - selection disappearing while clicking outside

html

css

radio-button