ionic4 making segment on ios to look like they look on android with css

Question

i am trying to make the segments on ios look the same way as they look on android. refer https://beta.ionicframework.com/docs/api/segment

i tried to play with the css properties like

segment-button-checked {
    --background-checked: transparent !important;
    --color-checked: white !important;
    border-bottom: 1 px solid white
}

ion-segment-button {
    --color: #8CA2A5;
    --border-color: transparent !important
}

selected button properties does not work this way. and overall visually does not look very nice as it looks on adroid

Answer 1

EDIT: Ionic 4 solution

Set the segment height to match header height

ion-segment{
    height: 44px;
}

Style segment button with color for the un-active segment.
Remove border and border-radius.

ion-segment-button{
    font-size: 16px;
    color: var(--ion-color-medium);
    border: 0px;
    border-radius: 0px;
}

.segment-button-checked class is used to style active state of segment.

.segment-button-checked{
    background: #FFF;
    color: var(--ion-color-primary);
    border-bottom: 3px solid var(--ion-color-primary);
}

Original segment button:

After styling:

Answer 2

This can easily done by setting mode as md

<ion-segment  mode="md">
  <ion-segment-button value="friends">
    <ion-label>Friends</ion-label>
  </ion-segment-button>
  <ion-segment-button value="enemies">
    <ion-label>Enemies</ion-label>
  </ion-segment-button>
</ion-segment>

Answer 3

With ionic 4 an ion-label was added and so the best approach is to customize it like this

.segment-button {
    ion-label {
        color: var(--ion-color-medium);
    }
}

.segment-button-checked {
    ion-label {
        color: var(--ion-color-light) !important;
    }
}

this will work well!