关于chrome、360浏览器自动填充的黄色背景处理方案

关于chrome、360浏览器自动填充的黄色背景样式解决方案

最近在做pc端项目，碰上了这个问题，到处找解决方案，总结一下常见的做个笔记，欢迎大佬们补充

1、chrome浏览器、360浏览器等（非兼容模式）

css代码

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

chrome修改前效果

chrome修改后效果

2、360浏览器（兼容模式）

css代码

input[type="text"] {
	background: transparent !important;
}
input[type="password"] {
    background: transparent !important;
}
@-webkit-keyframes autofill {
    to {
        background: transparent;
    }
}
input:-webkit-autofill {
    animation-name: autofill !important;
    animation-fill-mode: both !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-clip: content-box !important;
}

修改前效果

修改后效果