label not floating when the browser using password manager auto completion - html

Question

i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks (input floating label not floating on login form auto completion)and please find the attached image above. (Hello i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks, i really love this project!)
/* login form stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 30px;
}
input {
font-size: 1rem;
padding: 8px 5px 4px 5px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ced4da;
}
input:focus {
outline: none;
}
/* LABEL ======================================= */
.labe {
color: #999;
font-size: 1rem;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input:focus ~ .labe, input:valid ~ .labe {
top: -20px;
font-size: 14px;
color: #fb9f18;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #fb9f18;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
<form class="text-center">
<div class="group">
<input type="text" id="eMail" [(ngModel)]="loginEmail" #eMail="ngModel" name="loginEmail"
autocomplete="off" required >
<span class="bar"></span>
<label class="labe " for="eMail"><i class="far fa-user mr-2"></i> Email or Username</label>
</div>
<div class="group">
<input [type]="view ? 'text' : 'password'" type="password" id="password" [(ngModel)]="loginPassword"
autocomplete="off"
#password="ngModel" name="loginpwd" required>
<span class="bar"></span>
<label class="labe" for="password"><i class="fa fa-key mr-2"></i> Password</label>
<a class="hiddenPass" (click)='view = !view'><i class="far"
[ngClass]="{'fa-eye': view, 'fa-eye-slash':!view}"></i></a>
</div>
<div *ngIf="error" class=" alert alert-danger alert-dismissible" style="font-size: .8rem;"><i
class="fas fa-exclamation-triangle mx-1"></i>{{error}}</div>
<div class="d-flex justify-content-around">
<div class="boxes">
<input type="checkbox" class="asi"  id="box-1">
<label for="box-1">Remember me</label> 
</div>
<div>
<a class="fpwd" routerLink="/recoverpwd"> Forgot password?</a>
</div>
</div>
<div class=" mt-0 mb-0">
<button class="login-button" type="submit btn"
(click)="Login(loginEmail,loginPassword)">Sign in
</button>
<i *ngIf="loading" class="fas fa-spinner fa-pulse" style="color: #f1bf18; font-size: 20px;"></i>
</div>
<p class="awd">Don't have an Account?
<a class="fpwd" routerLink="/register">Register</a>
</p>
</form>

Answer 1

This might help you for Chrome (-webkit-autofill)
input:focus ~ .labe,
input:valid ~ .labe,
input:-webkit-autofill ~ .labe {
top: -20px;
font-size: 14px;
color: #fb9f18;
}
However, I think the idea here would be that once the browser has auto filled your fields, you'd fire an onChange event, which would update your model, in turn applying a class to say the field has a value.
I don't know enough about Angular to show example code of how that'd work.