可以在Firefox中更改“保存的密码”样式吗？

Question

我制作了一个如下登录页面：

但是当我将登录数据保存在Firefox中时，它看起来像这样：

那么我可以吗，如果可以，我如何摆脱这种淡黄色的色调，也许可以发挥自己的作用？我发现有人说可以使用-webkit-autofill伪类来更改它，但对我却不起作用。

代码段：

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>

如您所见，添加！important也无济于事（如果可以在摘要中进行测试）。

问候 布拉克

Answer 1

Firefox doesn't support the :autofill pseudo-class as of 68，您可以订阅https://bugzilla.mozilla.org/show_bug.cgi?id=740979来跟踪实施状态。

https://paul.kinlan.me/detecting-when-autofill-happens/描述了一种变通方法，它使您能够检测何时发生自动填充，并交换新元素以替换现有元素，从而复制自动填充的数据。