How do I change background color of specific ion-radio item/s?

ionic-v1
1

Hi fellow members,

For the following example:

<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>

I want “Choose A” to have background color as blue and tried …

<ion-radio ng-style="{ background-color: blue}" ng-model="choice" ng-value="'A'">Choose A</ion-radio>

But it’s not working, background color doesn’t change. Gone through How do I change the ion-radio color scheme? but what I really want is changing specific ion-radio item/s.

Kindly enlighten, thanks!

2

Did You think about doing this purely in CSS? You can add specific classes to Your radio buttons or use the :nth-child() selector (How nth-child works )

3

Hi there,

Thanks for replying :smile:

My actual app will do a Ng-repeat of ion-radio items and each of these items will have different background colors based on some criteria, thus using Ng-style to set background color.

Tried different combinations of css but not getting the effect desired, something like class=“radio-item-positive” will be awesome …

4

As far as styling radio buttons goes, it’s unfortunately not straight forward. First try and play around in the devTools inspector in order to see where You should change the background colors. You will probably need to search for workarounds, styling labels, etc. (example here, or here ).

Once you worked out what Your CSS should look like You can try using either ng-style or ng-class. Ng-class accepts all kinds of variables so it might be a good way to go for You :slight_smile:

5

You can modify the markup for a radio box directly instead of using the ion-radio directive. The reason it isn’t applying is because the item-content has a background color of white which is on top of the item-radio class.

Here’s a codepen where I am applying the background-color. You can see that the background-color needs to be changed on the item-content class in order to work. Also, you need to put the styling in quotes in ng-style.

1 Like
6

Thanks @psyche for sharing on css styling, yep I’m pretty much a beginner with css so it helps :smile:

Thanks @brandyshea for sharing sample implementation and I’ve managed to solve my problem :smile:

Amazing Ionic forum and community, you made my day :sunny:

2 Likes