2

I need to change the background color of the selected radio input.

I have the following ion-radio list:

<ion-list radio-group [(ngModel)]="selectedRadio">
    <ion-item  *ngFor="let ing of pizzaIng; let i = index">
        <ion-label>{{ing.name}}</ion-label>
        <ion-radio  [value]="ing.name"></ion-radio>
    </ion-item>
</ion-list>

The only way it's working, is by overriding item-md class of ion-item into:

ion-item.item-md{
    background-color: red;
}

But its changing all the radio options displayed. How can I only change the color of the selected one?

Here is a prepared stackblitz for it.

alim1990
  • 4,656
  • 12
  • 67
  • 130

1 Answers1

2

got this to work on my ionic 3 project and works in your demo. also just a heads up on using classes with 'md' at the end will only effect android.

.css 

page-home {
  .item-radio-checked{
      background-color: #a0a;
  }
}

enter image description here

Ira Watt
  • 2,095
  • 2
  • 15
  • 24