How to change the input field color in Ionic 5 when focused?

Question

I want to change the color of the input field, when it's focused. It's only that grey, when it gets focused by the following function and only as long as I don't type or click on the field.

export function autofocus() {
    let blanks = document.querySelectorAll(".blank")
    let textfield = document.getElementById("textfield")

    if (blanks.length > 0) {
        document.querySelectorAll(".blank")[0].setFocus()
    }
    else if (textfield) {
        document.getElementById("textfield").setFocus()
    }
}

The class that is responsible for it, is:

:host(.ion-focused) .item-native::after {
    background: var(--background-focused);
    opacity: var(--background-focused-opacity);
}

Unfortunately it's part of the Shadow DOM. Does anybody know, how to fix that? The opacity should be zero.

Answer 1

Solved it.

ion-item.ion-focused::part(native)::after {
    opacity: 0!important;
  }

Resources that helped me:

• https://ionicframework.com/docs/theming/css-variables
• https://ionicframework.com/docs/theming/css-shadow-parts