javascript - 什么 css 属性用于以 Angular 设置选中的单选按钮的样式？

Question

我的 Angular 4.1.3 应用程序中有一个像这样的单选按钮组:

<form #f="ngForm">
  <label class="btn btn-success">
    <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
  </label>
  <label class="btn btn-success">
   <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
  </label>
  <label class="btn btn-success">
   <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
  </label>
</form>

这很好用。但是，我想在选中相应的单选按钮时设置标签(包括按钮)的样式。

我看不到任何有用的属性:

(选中第一个)

我厌倦了显而易见的事情:

input[type=radio]:checked {
      background: red;
}

那是行不通的...我有什么想法可以在 CSS 中选择选中的按钮吗？

Answer 1

不幸的是，您不能使用子级 :checked 伪选择器为父级设置样式。为了让它工作，我建议使用模型值，例如:

<form #f="ngForm">
  <label class="btn btn-success" [ngClass]="{selected: myFood==='beef'">
    <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
  </label>
  <label class="btn btn-success" [ngClass]="{selected: myFood==='lamb'">
   <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
  </label>
  <label class="btn btn-success" [ngClass]="{selected: myFood==='fish'">
   <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
  </label>
</form>