javascript - 可以在 Firefox 中更改“保存的密码”样式吗?
问题描述
我做了一个如下所示的登录页面:
但是当我在 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 也无济于事(如果可以在代码段中对其进行测试)。
问候布拉克
解决方案
Firefox从 68 开始不支持 :autofill 伪类,您可以订阅https://bugzilla.mozilla.org/show_bug.cgi?id=740979以跟踪实现状态。
https://paul.kinlan.me/detecting-when-autofill-happens/描述了一种解决方法,它允许您检测自动填充何时发生并交换新元素以替换现有元素,复制自动填充的数据。
推荐阅读
- c++ - 类模板指针类型析构函数错误visual studio 2015 v140
- python - 如何使元组子类接受 2 个参数?
- node.js - Multer 和 CSRF 和
- laravel - Vue模板没有显示?
- sql - 带有子表的 SQL 查询
- node.js - Node.js 和 Mongoose 中的补丁请求方法
- primefaces - primefaces selectOneListbox 更改事件
- cassandra - 如果没有管理员权限,用户可以查看特定的密钥空间而不是其他人吗?
- java - javafx 自定义 ui 组件 FadeTransition 无法正常工作
- scala - 如何在运行时创建 Option 类型(反射)?