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

Posted 2023-02-24

【中文标题】可以在 Firefox 中更改“保存的密码”样式吗？

【英文标题】：Possible to change "Saved Password" style in Firefox?

【发布时间】：2019-08-06 17:12:05

【问题描述】：

我做了一个如下所示的登录页面：

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

我可以吗？如果可以的话，我怎样才能摆脱这种淡黄色的色调，或许能产生自己的效果？我发现一些帖子说可以使用 -webkit-autofill 伪类来更改它，但这对我不起作用。

代码sn-p：

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 也无济于事（如果可以在 sn-p 中进行测试）。

问候 布拉克

【问题讨论】：

从用户体验的角度来看，这是一个坏主意。用户明白黄色的含义——为什么要改变它并混淆他们？

我明白你的意思，但在这种情况下，它只是一个管理员登录，所以只有一个或几个人会使用它。此外，输入看起来已经不同，如果用户看到他们的用户名，他们就会明白这是保存的登录数据。它确实看起来不太好，因为当聚焦时边框颜色会变为蓝色。 i.imgur.com/ZZVcdrZ.png

【参考方案1】：

火狐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/ 描述了一种解决方法，它允许您检测自动填充何时发生并换入新元素以替换现有元素，从而复制自动填充的数据。