Looking for some help in mimicking this UI in Ionic



I am looking for a little help in mimicking this UI using Ionic. I am running into issues with having my label and input wrapped in an item and then trying to control the borders around each of those.

Any thoughts on how to achieve this look?

This is the code I am currently using in my project:

<form (ngSubmit)="onLogin()" [formGroup]="credentials">

        <ion-item lines="none" [ngClass]="((username.dirty || username.touched) && username.errors) ? 'error' : ''">
            <ion-label 
                position="stacked" 
                [innerHTML]="((username.dirty || username.touched) && username.errors) ? 'Please enter a username' : 'Username'"
            ></ion-label>
            <ion-input name="username" type="text" formControlName="username" spellcheck="false" autocapitalize="off">
            </ion-input>
        </ion-item>

        <ion-item lines="none" [ngClass]="((password.dirty || password.touched) && password.errors) ? 'error' : ''">
            <ion-label 
                position="stacked" 
                [innerHTML]="((password.dirty || password.touched) && password.errors) ? 'A password is required' : 'Password'"
            ></ion-label>
            <ion-input name="password" type="password" formControlName="password">
            </ion-input>
        </ion-item>
</form>

The issue I am running into is trying to figure out how to create the border as shown above for the input fields. Additionally, how can I highlight the field when the user clicks and focuses on the field?

Any help or direction would be much appreciated.