解决Chrome浏览器记住密码导致输入框背景变黄及字体变黑问题
本文介绍了Chrome浏览器在自动填充密码时导致输入框背景变黄、字体变黑的问题。通过CSS的-webkit-box-shadow内阴影覆盖黄色背景,并结合-webkit-text-fill-color修改字体颜色,可有效恢复原有样式。此外,通过设置autocomplete="off"及JS动态切换input类型,可彻底屏蔽浏览器自动填充功能,解决表单验证取值为空等兼容性问题。
Chrome浏览器自动填充样式问题分析
在谷歌浏览器中,当用户选择记住密码后,输入框的背景颜色会发生改变,同时输入的文字颜色也会变为黑色,具体效果如图所示。
输入框在未被自动填充前的原始样式如下所示。

然而,在浏览器自动填充记住的密码后,输入框背景会变为黄色,且字体颜色也会变成黑色。

造成这一现象的原因是谷歌浏览器内置的默认样式所致。
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}
使用CSS覆盖自动填充背景与字体颜色
若希望在记住密码后保持原有的输入框颜色,可以通过设置input内阴影来覆盖默认的黄色背景。具体的CSS代码如下:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;
}
应用上述CSS后,输入框的背景颜色将恢复为预期状态,如图所示。

尽管背景颜色已修正,但字体颜色仍可能保持为黑色。若需同时修改字体颜色,可参考以下CSS代码:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;
-webkit-text-fill-color: #666666;//设置字体颜色
}

屏蔽浏览器自动填充功能的JS解决方案
另一种解决方案是直接屏蔽谷歌浏览器的表单密码自动填充功能。
为了彻底解决谷歌浏览器表单记住密码引发的各类Bug(例如:记住密码后输入框看似有值,但通过JS进行表单验证时却获取不到值),需要屏蔽浏览器的默认记住密码功能。具体实现代码如下:
<input id="loginname" type="text" placeholder="手机号" autocomplete="off">
<input id="passwd" type="password" placeholder="密码" autocomplete="off">
<script>
$('#passwd').attr('type','text').focus(function(){
$(this).attr('type','password');
});
</script>
以上介绍了在JS中解决谷歌浏览器记住密码导致输入框颜色改变及相关问题的方法,希望对大家有所帮助。如果大家有任何疑问,欢迎留言,小编会及时回复。在此也非常感谢大家对本站网站的支持!
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件?
2026-11-05 09:37:58
JavaScript事件处理实例:点击、输入与表单验证代码
2026-11-05 09:06:19
