Change ion-input underline color in Ionic 4

Ionic 4.x uses CSS Custom Properties for most of the time.

src/app/pages/test/test.page.scss

:host {
    ion-item {
        --border-color: white; // default underline color
        --highlight-color-invalid: red; // invalid underline color
        --highlight-color-valid: green; // valid underline color
    }
}

If necessary, please check the other custom properties here.

Try this css

.item-has-focus{
   --highlight-background: #e2e2e2;
}

For Ionic V4.X is a little bit diffrent.

You can open specific_page.scss file where you want to change ion-input border when input value is Valid o Invalid

Change the colors of the following class, like this:

:host {
   .item-interactive.ion-invalid{
    --highlight-background: yellow !important;
  }
  .item-interactive.ion-valid{
    --highlight-background: black !important;
  }
}

The underline is actually a part of the ion-item, not the ion-input.

ion-item {
  --border-color: var(--ion-color-danger, #f1453d);
}