0

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?

Adrian Krebs
  • 4,179
  • 5
  • 29
  • 44
  • `:checked` selector works fine for CSS for an Angular app. – random_user_name Sep 29 '17 at 19:22
  • `input[type="radio"]:checked` is the correct selector. What are you trying to style about it? If you want to style the label of the selected radiobutton, you do `:checked+label` [See Here](https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label) – Jun Kang Sep 29 '17 at 19:29
  • Nothing happens when I use this selector. I should be able to see the checked attribute when I inspect the according button? It's not there – Adrian Krebs Sep 29 '17 at 19:37

1 Answers1

1

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>
Marek Szczepansky
  • 161
  • 4