Html 单选按钮不可单击，仅当我单击标签时状态才会更改

我正在从教程中学习如何制作自己的单选按钮，但当我将div改为包装而不是标签时，我的单选按钮崩溃了。我用html和scss制作了我的单选按钮，但只有当我点击标签时，单选按钮的状态才会改变，但单选按钮是不可点击的

我的html代码：

<div class="cui-radio-button">
      <input type="radio" name="RadioField" id="Radio1" class="cui-a-radio-button__input" checked>
      <div class="cui-a-radio-button-style"></div>
      <label for="Radio1">option 1</label>
</div>
<br>

<div class="cui-radio-button">
    <input type="radio" name="RadioField" id="Radio2" class="cui-a-radio-button__input" checked>
    <div class="cui-a-radio-button-style"></div>
    <label for="Radio2">option 2</label>
</div>

有人知道如何解决此缺陷吗？对我来说重要的是div作为包装而不是标签。我想可能的变化应该是html，但我不知道如何修复它

@mixin radioStyle($borderSize, $borderColor, $dotColor, $focusColor, $width:1.125rem, $height:1.125rem,) {
  &.cui-a-radio-button-style {
    height: $height;
    width: $width;
    border: $borderSize solid $borderColor;
      &.focus,
      &:focus {
        border: $borderSize solid $focusColor;
      }
      &.disabled,
      &:disabled,
      &:disabled:focus,
      &:disabled:hover {
        opacity: .3;
  }

  &.cui-a-radio-button-style::after {
    background: $dotColor
  }
}
}

.cui-radio-button {
  cursor: pointer;
  display: inline-flex;
  align-items:center
}

.cui-a-radio-button__input {
  display: none;

  &:disabled + label {
    & + .cui-a-radio-button-style{
    opacity: .3;
    }}
}

.cui-a-radio-button-style {
  border-radius: 50%;
  margin-right: 10px;
  box-sizing: border-box;
  padding: 2px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  align-items:center;
}

.cui-a-radio-button-style::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s;
}

input:disabled+label {
  opacity: .3;
}

.cui-a-radio-button__input:checked + .cui-a-radio-button-style::after {
  transform: scale(1);
}

@include radioStyle(2px, gray, green, blue);