[Ionic 4] Override color of item.scss

[joanroig]

While editing a text input seems like the primary color is set in a line under the text (the white line is a border-bottom):

I’ve tried overriding this property in variables.scss with no success using --highlight-color-focused: transparent;, here is the property disabled in chrome:

After looking in the code (https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.scss) I’ve tried overriding this with no success too:

:host(.item-interactive.item-has-focus) {
  --highlight-background: var(--highlight-color-focused);
}

Any idea? Thanks.

[joanroig]

Well, this is my workaround for now, just removing lines from the ion-item that enclose the input:

  <ion-item lines="none">
    <ion-input></ion-input>
  </ion-item>

[jonStake]

.item-interactive.item-has-focus) {
  --highlight-background: var(--highlight-color-focused);
}