Can you style HTML input elements filled by browser? - html

Question

I have ASP.NET MVC app with 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 uses bootstrap classes. It looks nice with dark theme:
But once the browser (tried Chrome and Edge) pre-filled the form it becomes ugly and I was told its by design.
Is there any way I can change the pre-filled form elements colours?
EDIT: as suggested I looked up for autofill and found only these:
.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)
}
so I added the following css to override it but it has no effect:
.form-floating > .form-control:-webkit-autofill {
background-color: #dedede;
border-color: #2a2a2a;
color: #2a2a2a;
}

Answer 1

Apparently the style I was looking for is this:
.form-control:disabled, .form-control[readonly] {
background-color: #dedede;
border-color: #2a2a2a;
color: #2a2a2a;
}
Thanks to #epascarello and #vee for help