How to change style for radio button childs in IONIC using angularJS

Question

<ion-list radio-group>
    <ion-radio name="choiceLng" ng-model="language" value="y" ng-value="'y'" ng-change="langChanged('y')">y</ion-radio>
    <ion-radio name="choiceLng" ng-model="language" value="x" ng-value="'x'" ng-change="langChanged('x')">x</ion-radio>
</ion-list>

I created radio buttons using ion-list. I want to change style for childs of ion-radio which are the input tag and the div. How can I "reach" this input tag and then change css dynamically using angularJs?

Answer 1

You can have default class on all ion-radio element. Then with proper CSS selector you can add style for its content like

.default .item-content {
 // To add style to content label along with its background
}
.default .radio-icon {
 // To add style to content label tick icon (or to modify it when not shown)
}

Then you can make use of ng-class and check value of ngModel language with its ng-value to apply particular class say selected to that label tag. In your case it's as follows

<ion-list radio-group>
    <ion-radio name="choiceLng" ng-class="{'selected': language === 'y'}" ng-model="language" value="y" ng-value="'y'" ng-change="langChanged('y')">y</ion-radio>
    <ion-radio name="choiceLng" ng-class="{'selected': language === 'x'}" ng-model="language" value="x" ng-value="'x'" ng-change="langChanged('x')">x</ion-radio>
</ion-list>

Now here you're using ion-radio static so need to add that ng-class too every option but if you're using ng-repeat on it, it'll be only once just to compare model with ng-value variable. After along with model change selected class will be added to only selected radio option so you can have CSS for its contents the same way:

.selected .item-content {
 // To add style to selected content label along with its background
}
.selected .radio-icon {
 // To add style to selected content label tick icon (or to modify it)
}

Working Codepen example to refer.

Answer 2

If you don't want to add additional classes you can add this to you ionic.app.scss file:

label.item.item-radio.ng-valid
  border-radius: 400px
  margin: 5px 50px 5px 10px