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

【问题标题】：why is the checked pseudo class not responding?为什么检查的伪类没有响应？
【发布时间】：2020-05-01 05:48:48
【问题描述】：

我正在尝试设置一些单选按钮的样式，但选中的伪类没有按预期工作。我可以让悬停正常工作。这只是较大形式的一小部分，但我正在测试这一点以使其在我将其应用于其他部分之前使其工作。我想我已经包含了所有必要的代码。如果需要，我可以提供更多。谢谢！

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

【问题讨论】：

标签： html css sass radio-button

【解决方案1】：

我在 __radio-label 中添加 padding-left 以显示您的自定义输入 + 在 __radio-input 中添加 z-index 和不透明度以隐藏基本输入并从右到左更改 __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;
    }
  }
}

希望这能解决你的问题

【讨论】：