Tabs highlight color change


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


<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>


#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.


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