Can't change focus/highlight color on div+item+input

I have a div, inside it an item and inside it an input, its a login so I have username and password, I’m doing a thing where when he clicks the enter button while on the username input he then focuses the password camp, he knows where to focus cuz I put #b tag on password and in code I tell him to focus that element, it works but it gets this horrible ugly white background, I’ve inspected it on chrome and tried changing literally all the variables anywhere close that div/item/input that had anything to do with focus and highlight to transparent, but nothing did the job, how can I prevent this from happening?

image

image

After trying all combinations I figured out that it happens because the ion input is inside an ion item

     <div>
          <h3>User</h3>
          <ion-input tabindex="1" (keyup.enter)="moveFocus(c)"></ion-input>
      </div>
  
      <div padding-top>
          <h3>Password</h3>
          <ion-input [type]="passwordType" tabindex="2" #c></ion-input>
      </div>

This no longer creates the white color, too bad since that ion-item was helping out but whatever

edit: i’m now using a div where the item was to get the underline like what ion item created for the input

from

            <div>
              <h3>Utilizador</h3>
              <ion-item mode="ios" no-padding>
                <ion-input type="text" placeholder="123456" [(ngModel)]="labelUtilizador" tabindex="1" (keyup.enter)="moveFocus(b)"></ion-input>
              </ion-item>
            </div>

to

            <div style="border-bottom: 0.5px solid white;">
              <h3 style="padding-left: 0px;">Utilizador</h3>
              <div class="ion-margin-bottom" style="display: flex; flex-direction: row">
                <ion-input no-padding type="text" placeholder="123456" [(ngModel)]="labelUtilizador" tabindex="1" (keyup.enter)="moveFocus(b)"></ion-input>
              </div>
            </div>