CODEWITHSUNDEEP
ionic-frameworksassionic3
alim1990
alim1990

Reputation: 4972

Ionic 3 how to change the background colour of selected radio button in ion-item container

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.

Upvotes: 2

Views: 2486

Answers (1)

Ira Watt
Ira Watt

Reputation: 2135

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

Upvotes: 2

Related Questions