说明
原始效果,未使用自动填充的 input
效果:
使用自动填充密码,整个 input
改为浏览器默认样式。其实就是在原 input
上盖了一个 input
这就麻烦了…
修改后:
CSS
input:-webkit-autofill:自动填充 class
类名;
-webkit-box-shadow:使用盒子阴影遮挡input背景色;
border-radius:一定要设为 0,默认是有弧度的;
width:长度与原始 input 保持一致,视实际情况而定;
padding-left:字体左侧的间距与原始字体间距保持一致,视实际情况而定;
input:-webkit-autofill {
-webkit-box-shadow: 0px 0px 0px 20px rgb(32,85,104) inset;
-webkit-text-fill-color: #fff;
border-radius: 0;
width: 240px;
padding-left: 46px;
}
如果还不知如何设置浏览器的自动填充密码,可参考:《浏览器自动填充和密码(谷歌和edge)》