本文介绍了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中解决谷歌浏览器记住密码导致输入框颜色改变及相关问题的方法，希望对大家有所帮助。如果大家有任何疑问，欢迎留言，小编会及时回复。在此也非常感谢大家对本站网站的支持！