My ASP.NET MVC application has a login page:
<form id="account" method="post">
<h2>Use email account to log in.</h2>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-floating">
<input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true"/>
<label asp-for="Input.Email" class="form-label"></label>
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-floating" >
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" />
<label asp-for="Input.Password" class="form-label"></label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div>
<div class="checkbox form-row">
<label asp-for="Input.RememberMe" class="form-label">
<input class="form-check-input" asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-row">
<button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
</div>
It utilizes bootstrap classes and looks great with a dark theme:
https://i.sstatic.net/pRbpO.png
However, when the browser (tried Chrome and Edge) autofills the form, it appears unattractive, which I was informed is intentional.
Is there any way I can change the colors of the autofilled form elements?
https://i.sstatic.net/ErIOB.png
EDIT: upon researching autofill, I only found these suggestions:
.form-floating > .form-control:-webkit-autofill {
padding-top: 1.625rem;
padding-bottom: .625rem
}
.form-floating > .form-select {
padding-top: 1.625rem;
padding-bottom: .625rem
}
.form-floating > .form-control: not(:-moz-placeholder-shown)~label {
opacity: .65;
transform: scale(.85)translateY(-.5rem)translateX(.15rem)
}
.form-floating > .form-control: focus~label, .form-floating > .form-control: not(:placeholder-shown)~label, .form-floating > .form-select~label {
opacity: .65;
transform: scale(.85)translateY(-.5rem)translateX(.15rem)
}
.form-floating > .form-control:-webkit-autofill~label {
opacity: .65;
transform: scale(.85)translateY(-.5rem)translateX(.15rem)
}
Therefore, I added the following CSS to override it but it had no effect:
.form-floating > .form-control:-webkit-autofill {
background-color: #dedede;
border-color: #2a2a2a;
color: #2a2a2a;
}