单选按钮 css 适用于选中，但不适用于未选中

Question

我有以下代码(css+html(：

.c-form__radio__input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1; }
  .c-form__radio__label {
    font-size: 0.8rem;
    border: none;
    margin: 0;
    padding: 0 0 0 calc(2px + 1rem);
    cursor: pointer;
    line-height: 1; }
    .c-form__radio__label::before, .c-form__radio__label::after {
      content: '';
      width: calc(0.8rem + 2px);
      height: calc(0.8rem + 2px);
      display: block;
      border: 1px solid transparent;
      border-radius: 100%;
      position: absolute;
      top: calc(0.5rem - 1px);
      left: 0;
      background-color: transparent; }
    .c-form__radio__label::before {
      border-color: #bdc3c7; }
    .c-form__radio__label::after {
      transform: scale(0.6); }
    .c-form__radio__input:checked + .c-form__radio__label::after {
      background-color: blue; }
    .c-form__radio__input:not(:checked) + .c-form__radio__label::after {
      background-color: transparent; }

<div class="c-form__radio">
            <input id="radio1" type="radio" class="c-form__radio__input" name="radio1"/>
            <label for="radio1" class="c-form__radio__label">First radio</label>
        </div>

代码可用于检查，但再次单击取消选中不起作用。

如果我开始未选中并单击选中正在工作，则再次单击不起作用;开始选中，然后单击不起作用;

Answer 1

由于除非单击共享相同

name属性的另一个按钮，否则无法取消选中radio按钮，因此您可以使用checkbox代替。

<input id="radio1" type="checkbox" class="c-form__radio__input" name="radio1"/>

希望这有帮助。