Changing ion-input border color on focus

Question

I used some CSS to style the ion-input field, but I want the border of the field to change on focus

CSS

.input-field {
    background: rgba(250,250,250,1);
    border: solid 1px rgba(218,218,218,1);
    margin-bottom: 16px;
    height: 50px;
    border-radius: 20px;
    padding-left: 16px;
}

HTML

<div class="input">
    <ion-label class="prompt-text" position="stacked">Email</ion-label>
    <br><br>
    <ion-input class="input-field" placeholder="[email protected]"></ion-input>  
</div>

This is how the field looks

I tried to use the below CSS, but it didn't work

.input-field:focus {
    border: solid 2px black;
}

UPDATE

I am able to change the ion-input field border color using Typescript by handling the events (ionFocus) and (ionBlur)

  <div class="input">
    <ion-label position="stacked">Email</ion-label>
    <br><br>
    <ion-input autocomplete="off" [(ngModel)]="email" id="email-input" (ionFocus)="focusEmail()" (ionBlur)="unFocusEmail()" class="input-field" placeholder="[email protected]"></ion-input>  
  </div>

Typescript

focusEmail(){
    document.getElementById('email-input').style.border = "solid 2px #107CF1";
  }

 unFocusEmail(){
    document.getElementById('email-input').style.border = "solid 1px rgba(218,218,218,1)";
  }

Answer 1

Simple way is CSS:

.has-focus {
  border: 2px solid #5b9bd1 !important;
}

Answer 2

ion-item.item-has-focus {
    --highlight-background:black;
}