[Ionic 4] Override color of item.scss


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.


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

  <ion-item lines="none">

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