CSS 修改浏览器自动填充密码默认样式 input

说明

原始效果，未使用自动填充的 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)》