Remove input bottom red border in Ionic 5

Ionic Framework
1
  • Ionic version: 6.10.1
  • @ionic-native/core: 5.27.0
  • @ionic/angular: 5.2.2
  • Angular version: 9.1.6

Screen Shot 2020-06-28 at 4.48.52 PM

How can I remove the bottom red border of the ion-input that appears when you click on it? It appears only if you click on the input, and stays there even if you click on the second input.

Only appears while using Android and Web. On iOS it’s not visible, which is good for me.

This is a new app and this red border seems to be a default behavior, but, why? Why it’s there? I couldn’t find an easy way to remove this.

<ion-content>
  <ion-list>
    <form>

      <ion-item>
        <ion-label position="fixed">Email</ion-label>
        <ion-input type="email" required>
        </ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="fixed">Password</ion-label>
        <ion-input type="password" required>
        </ion-input>
      </ion-item>

    </form>
  </ion-list>
</ion-content>

I have tried a few solutions that I have found out there for Ionic 4, but, no luck so far.

Any help would be appreciated.

Thanks for all.

2

I think I have found the solution in the documentation:

Highlight Height

Doc’s description: Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight.

The solution is:

ion-item {
    --highlight-height: 0;
}

Result:
Screen Shot 2020-06-28 at 6.36.01 PM

I’m still not sure why this is a default behavior. Should be optional, I think.

If any of you have another solution or any comment about this, feel welcome to post it.

Thanks for all.