使用什么css属性来对选中的单选按钮设置角度样式？

Question

I have a radio button group like this in my angular 4.1.3 app:

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

This works well. However, I would like to style the label (including the button) when the corresponding radio button is checked.

I can't see any useful attribute:

(first one is checked)

I tired the obvious:

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

That doesn't work... Any ideas how I could select the checked button in CSS?

Answer 1

Unfortunately you cannot style parent using child :checked pseudo-selector. To get this working i recommend use model value, eg:

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