单选按钮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

由于radio按钮无法取消选中，除非点击另一个共享相同name属性的按钮，否则您可以改为使用checkbox。

<input id="radio1" type="checkbox" class="c-form__radio__input" name="radio1"/＆GT;

希望这有帮助。