为什么检查的伪类没有响应？

Question

我正试图对一些单选按钮进行样式设计，但检查的伪类并没有像预期的那样工作。 我可以让悬停工作得很好。这只是一个较大的表单的一小部分，但我正在测试这一小部分，以便在我将其应用于其他部分之前使其工作。 我想我已经包含了所有必要的代码。 如果需要，我可以提供更多。 谢谢！我正在尝试对一些单选按钮进行样式设计，如果需要的话，我可以提供更多的代码。

 <div class="form-group__radio-item">
   <label for="yes" class=form-group__radio-label>Yes
      <input name="data-radios" class="form-group__radio-input" id="yes"type="radio">
      <span class="form-group__radio-button"></span>
   </label>
 </div>
 <div class="form-group__radio-item">
   <label for="no" class=form-group__radio-label>No
      <input type="radio" name="data-radios" class="form-group__radio-input" id="no">
       <span class="form-group__radio-button"></span>
   </label>
 </div>

&__radio-group {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    &__radio-label {
      font-family: $theme;
      position: relative;
      font-weight: 400;
      font-size: 0.875rem;
      color: $colorLightGray;
      margin-right: 2px;
      padding-bottom: 1rem;
      user-select: none;
      }

    &__radio-box {
      margin: 0 1rem 0 1rem;
    }

    &__radio-item {
      padding-bottom: 0.5rem;
    }

    &__radio-input {
      margin-right: 0.5rem;
      margin-bottom: 1rem;
    }

    &__radio-input:checked + &__radio-button{
        background-color: blue;
    }

    &__radio-input:hover + &__radio-button {
      background-color: green;
  }

    &__radio-button {
      position: absolute;
      display: inline-block;
      border: 2px solid red;
      top: 0rem;
      right: 3rem;
      height: 15px;
      width: 15px;
      border-radius: 50%;

      &::after {
        content: "";
        display: block;
        height: 1.3rem;
        width: 1.3rem;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        transition: opacity .2s;
    }

      &:hover{
        background-color: yellowgreen;
      }
    }

Answer 1

我在__radio-label中添加了padding-left来显示你的自定义输入+z-index，在__radio-input中添加了不透明度来隐藏基本输入，并将__radio-button从右到左改变为对齐自定义输入。

.form-group {
  &__radio-label {
    position: relative;
    font-weight: 400;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    user-select: none;
  }

  &__radio-box {
    margin: 0 1rem 0 1rem;
  }

  &__radio-item {
    padding-bottom: 0.5rem;
  }

  &__radio-input {
    z-index: -1;
    opacity: 0;
  }

  &__radio-input:checked + &__radio-button{
    background-color: blue;
  }

  &__radio-input:hover + &__radio-button {
    background-color: green;
  }

  &__radio-button {
    position: absolute;
    display: inline-block;
    border: 2px solid red;
    top: 0rem;
    left: 0;
    height: 15px;
    width: 15px;
    border-radius: 50%;

    &::after {
      content: "";
      display: block;
      height: 1.3rem;
      width: 1.3rem;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
      opacity: 0;
      transition: opacity .2s;
    }

    &:hover{
      background-color: yellowgreen;
    }
  }
}

希望这能解决你的问题