почему проверенный псевдокласс не отвечает?

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

Я добавляю padding-left в __radio-label, чтобы показать ваш пользовательский ввод + z-index и непрозрачность в __radio-input, чтобы скрыть базовый c ввод, и изменить __radio-кнопку справа налево для выравнивания пользовательских вводов

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

Надеюсь, это решит вашу проблему