为什么 :checked 不适用于我的单选按钮？

问题描述

所以我创建了一个测验表单并想更改单选按钮的样式，我做到了，但是现在您无法判断何时选择了选项，但仍在记录答案。如何使所选选项更改背景颜色？

这是一个问题的 HTML：

<div class="form-group">
            <label
              >{{ quizQuestions[0] }}
              <div class="radio"  *ngFor="let flavor of answerSetone">
                <label id="radio">
                  <input  
                  checked 
                  type="radio" 
                  name="flavor" 
                  class="btn-check" 
                  ngModel [value]="flavor.num" 
                  required/>
                  {{ flavor.name | titlecase}}
                </label>
              </div>
            </label>
          </div>

我认为应该使用的 CSS：

      opacity: 0;
      position: fixed;
      width: 0;
    }

    .radio label {
      display: inline-block;
      background-color: rgb(248,174,89);
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 4px;
  }

  .radio input[type=radio]:checked + label {
    background-color:rgb(114,31,6);
}
```an

解决方法

在你的css中你需要引用你的类型：

.radio input[type="radio"]:checked + label {

,

      opacity: 0;
      position: fixed;
      width: 0;
    }

    .radio label {
      display: inline-block;
      background-color: rgb(248,174,89);
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 4px;
  }
  .radio input[type="radio"]:checked + label {
    background-color:rgb(114,31,6);
}

<div class="form-group">
            <label
              >{{ quizQuestions[0] }}
              <div class="radio"  *ngFor="let flavor of answerSetOne">
                <label id="radio">
                  <input  
                  checked 
                  type="radio" 
                  name="flavor" 
                  class="btn-check" 
                  ngModel [value]="flavor.num" 
                  required/>
        {{ flavor.name | titlecase}}
                </label>
              </div>
            </label>
          </div>