為什么：checked 不適用於我的單選按鈕？

Question

所以我創建了一個測驗表單並想更改單選按鈕的樣式，我確實這樣做了，但是現在您無法判斷何時選擇了一個選項，但答案仍在記錄中。 如何使所選選項更改背景顏色？

這是一個問題的 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

Answer 1

在您的 css 中，您需要引用您的類型：

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

Answer 2

 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>