Possible to change "Saved Password" style in Firefox?

Question

I made a login page which looks like this:

but when I save my login data in Firefox it looks like this:

so can I and if yes how can I get rid of this yellow-ish tint and maybe make my own effect? I found some posts where it was said that it can be changed by using -webkit-autofill pseudoclass but that didn't work for me.

Code snippet:

button {
    border: none;
    border-radius: 2px;
    box-sizing: border-box;
    height: 25px;
    margin: 5px;
    padding: 0;
    outline: none;
    background-color: #0060df;
    color: rgb(230, 230, 231);
}

.text-input {
    height: 25px;
    box-sizing: border-box;
    border: 1px solid #5a5a5c;
    border-radius: 2px;
    padding: 0 5px;
    margin: 5px;
    background-color: #474749 !important;
    color: rgb(230, 230, 231) !important;
}

#login-form {
    display: flex;
    flex-direction: column;
    padding: 25px;
    border-radius: 2px;
    background-color: #323234;
}

<div id="login-form">
  <input type="text" class="text-input" id="name-input" placeholder="Name"/>
  <input type="password" class="text-input" id="password-input" placeholder="Password"/>
  <button id="login-button">Login</button>
</div>

As you can see adding !important doesn't help aswell (if it is possible to test that in the snippet).

Regards Blakk

Answer 1

Firefox doesn't support the :autofill pseudo-class as of 68, you can subscribe to https://bugzilla.mozilla.org/show_bug.cgi?id=740979 to track the status of implementation.

https://paul.kinlan.me/detecting-when-autofill-happens/ describes a workaround, which allows you to detect when autofill happens and swap in a new element to replace the existing one, copying over the autofilled data.

Answer 2