Change color of active state in tab icons


#1

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


How do I change the color of an active ionic tab?
#2

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


#3

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

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.


#5

Thank you. It worked


#6

This solution no longer seems to work.


#8

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


#9

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.