一、修改场景:默认的样式通过和背景颜色不一致,有一些突兀,体验不好。
二、问题根因:谷歌默认的样式为淡黄色
三、解决思路
1、覆盖掉默认的颜色
适用场景:背景色或者背景图片的颜色是一致的,且没有变化
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
// -webkit-transition-delay: 99999s; // 通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化
// -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
};
2、延长增加填充背景色
试用场景:背景图片颜色是渐变的
&:-webkit-autofill { // -webkit-box-shadow: 0 0 0px 1000px $bg inset !important; // -webkit-text-fill-color: #fff !important; -webkit-transition-delay: 99999s; // 通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化 -webkit-transition: color 99999s ease-out, background-color 99999s ease-out; };
四:覆盖默认的边框颜色
// input样式
.input {
}
// 增加focus伪类处理
.input:focus {
outline:none;
border: 1px solid red;
}