how to remove ionic 4 segment indicator (bottom line)? please let me know

问题

  .segment-button-indicator {
        -ms-flex-item-align: end;
        align-self: flex-end;
        width: 100%;
        height: 2px;
        background-color: var(--indicator-color);
        opacity: 1;
    }

I am new to hybrid app development. I have to use ion-segment. There is ion-segment-indicator which indicates bottom line in ion-segment, so I need to remove it. I can remove from these default css codes, but when I try to customize it's not removing

回答1:

You cannot remove it, but you can hide it by setting it's color to transparent.

On theme/variables.scss add this:

ion-segment-button {
  --indicator-color: transparent !important;
  --indicator-color-checked: transparent !important;
}

回答2:

Please go and paste below code in your variables.scss it will work

.segment-button-checked{
  --border-width:0px;
  --indicator-color-checked: 0;   
}

来源：https://stackoverflow.com/questions/55919872/how-to-remove-ionic-4-segment-indicator-bottom-line-please-let-me-know