CODEWITHSUNDEEP
javascripthtmlcssangular
Adrian Krebs
Adrian Krebs

Reputation: 4387

What css property to use to style a checked radio button in angular?

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:

enter image description here

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

Upvotes: 0

Views: 2331

Answers (1)

Marek Szczepansky
Marek Szczepansky

Reputation: 161

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

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

Upvotes: 1

Related Questions