Google Form Autocomplete Strange Behavior - html

Question

I hope that this question makes sense. I am developing a website which uses Identity Server 4 for authentication (probably not relevant, but it can't hurt). I have done a lot of testing on the sign in page and naturally Google (specifically Chrome, I assume) provides suggestions for previous entries. I am not very familiar with front end design and have no idea where to start in fixing this issue. I don't mind that there is autocomplete, but as you can see in the attached image, it interacts with the UI very strangely.
I am using Bootstrap 4 btw. Here is the cshtml for the card pictured:
<div class="card-body">
<form class="rounded-lg" asp-route="Login">
<input type="hidden" asp-for="ReturnUrl" />
<div class="form-group">
<input class="form-control custom-input rounded-lg" placeholder="Email or Username" asp-for="Username" required>
</div>
<div class="form-group password">
<input id="password-field" type="password" class="form-control rounded-lg" placeholder="Password" asp-for="Password" required autocomplete="off">
<span id="pass-status" class="fa fa-eye" aria-hidden="true"></span>
</div>
#if (Model.AllowRememberLogin)
{
<div class="form-group">
<div class="form-check">
<input class="form-check-input rounded-sm" asp-for="RememberLogin">
<label class="form-check-label" asp-for="RememberLogin">Remember Me</label>
</div>
</div>
}
<p>Default Username: Admin Password: P#ssword1</p>
<button class="btn btn-lg btn-primary btn-block text-uppercase rounded-pill" name="button" value="login">Sign In</button>
<div class="custom-link">
Or Register a New Account
</div>
</form>
</div>
And here is the css:
#import '../lib/bootstrap/dist/css/bootstrap.min.css';
.custom-input {
height: auto;
}
.custom-link {
padding-top: 15px;
}
.custom-body-container {
margin-top: 10%;
}
.password {
position: relative;
margin-bottom: 10px;
}
.password .fa-eye {
position: absolute;
top: 12px;
right: 12px;
font-size: 15px;
}
.password .fa-eye-slash {
position: absolute;
top: 12px;
right: 12px;
font-size: 15px;
}

Answer 1

As you just mentioned Chrome the solution would be adding the autocomplete property with the value.
autocomplete="chrome-off"
Disabling Chrome Autofill
The behaviour is very different for each browser so you may have to add some conditions if you would like full compatibility.
Firefox use autocomplete="off" instead How do you disable browser Autocomplete on web form field / input tag?