Search code examples
ionic4ionic-tabs

Ionic 4: How to set border to the selected ion-tab-button?

I tried applying the following css but didn't work.

*.scss

ion-tab-button[aria-selected=true] {
   border-top: 1px solid blue;
}

*.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>
    ...
    <ion-tab-button tab="about">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
Solution

  • I found that applying the box-shadow instead of border worked.

    ion-tab-button[aria-selected=true] {
  box-shadow: 0 2px 0 0 blue inset;
}