In form background color changes when using tab key

Ionic Framework
1

In my app I have a simple form that looks like this

image

But when I start using the tab key to move to the next field the background color changes so it looks like this

image

What could I have done wrong ? My html looks like this, I hove no styling except for error messages

<ion-row>
  <ion-col>
    <ion-card>
      <ion-item>
        <form [formGroup]="feedbackForm" (ngSubmit)="sendFeedback()" novalidate>
          <ion-label position="stacked">Email</ion-label>
          <ion-input type="email" formControlName="from" placeholder="Indtast din email adresse"></ion-input>
          <span class="error ion-padding" *ngIf="isSubmitted && errorControl.from.errors?.required">
            Indtast din email
          </span>
          <div formArrayName="races" *ngFor="let race of races.controls; let i=index">
            <div [formGroupName]="i" class="ion-padding-start border-bottom">
              <ion-label class="" position="stacked">Arrangør</ion-label>
              <ion-input formControlName="category" placeholder="Løbs/event arrangør"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('category', i)">Udfyld arrangør</span>
              <ion-label position="stacked">Løb/event</ion-label>
              <ion-input formControlName="event" placeholder="Løbs/event navn"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('event', i)">Udfyld løbs/event navn</span>
              <ion-label position="stacked">Dato</ion-label>
              <ion-input formControlName="date" placeholder="Dato løbet blev afholdt"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('date', i)">Udfyld dato løb/event blev afholdt</span>
              <ion-label position="stacked">Link</ion-label>
              <ion-input formControlName="link" placeholder="Link til billedalbum"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('link', i)">Udfyld link til album</span>
              <ion-label position="stacked">Fotograf</ion-label>
              <ion-input formControlName="fotograf" placeholder="Fotografens navn"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('fotograf', i)">Udfyld fotograf</span>
            </div>
          </div>
          <ion-item>
            <ion-buttons slot="end">
              <ion-button color="secondary" (click)="addRace()">Tilføj et link </ion-button>
            </ion-buttons>
          </ion-item>
          <ion-item>
            <ion-button (click)="cancelSendFeedback()" color="warning" expand="block">Cancel</ion-button>
            <ion-button type="submit" color="primary" expand="block">Send </ion-button>
          </ion-item>
        </form>
      </ion-item>
    </ion-card>
  </ion-col>
</ion-row>
2

have you checked if in your css there isn’t any “hover, focus or active” rule?
you should inspect the css and see if, when you press tab, if something changes in your html code.

Let me know

3

I have nothing like that in my css. all I have in the scss file for the component is this

.card-title {
  position: absolute;
  top: 10%;
  margin-right: 10%;
  padding: 5px;
  left: 10%;
  color: #fff;
  font-size: 1.3em;
  background-color: rgba(0, 0, 0, .5);
}
.card-subtitle {
  position: absolute;
  bottom: 10%;
  left: 10%;
  padding: 5px;
  color: #fff;
  font-size: 1.0em;
  background-color: rgba(0, 0, 0, .5);
}