Tabs highlight color change


#1

I am using the .tab-highlight selector and want to be able to change the highlight on the selected tab.

.html

<ion-tabs #myTabs>
  <ion-tab id="tab1" [root]="tab1Root" tabTitle="Home"></ion-tab>
  <ion-tab id="tab2" [root]="tab2Root" tabTitle="About"></ion-tab>
  <ion-tab id="tab3" [root]="tab3Root" tabTitle="Contact"></ion-tab>
</ion-tabs>

.ts

#tab1.tabs-md[tabsHighlight=true] .tab-highlight {
  background-color: green;
}

How can I change the color of the highlight to the active tab? Adding #tab1 to the .scss does not change the highlight.


#2

Hi, I’m facing the same problem. Did you find the solution?