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

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?

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 — Jun Kang
– Jun Kang, Commented Sep 29, 2017 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
– Adrian Krebs, Commented Sep 29, 2017 at 19:37

Marek Szczepansky · Accepted Answer · 2017-09-29 19:41:35Z

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>

answered Sep 29, 2017 at 19:41

Marek Szczepansky

1614 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related