Change color of active state in tab icons

I am having difficulty tracking this down. I am trying to change the color of the active state on the tab icons. I want to keep my ion-tabs background grey and the icons themselves as the default black, but an active tab I want a different color.

Any clue what I am missing? Thank you for yoru help.

Chuck

1 Like

Bump. Anyone have any idea on a solution to this? Thank you.

So, Ionic has a CSS rule that changes the opacity.

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
}

You basically just have to override that rule.

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    color: red;
}
4 Likes

Brilliant!! I was looking at it so long that I never even thought of that and it was right there in front of me :slight_smile: Thank you for your help.

1 Like

Thank you. It worked

This solution no longer seems to work.

look at this http://stackoverflow.com/questions/43463223/how-do-i-change-the-color-of-an-active-ionic-tab

1 Like

For me, setting the CSS rules for the class “.activated” worked.

.activated {
   background-color: blue;
}

This class is applied momentarily to the tab item that is selected.