谷歌浏览器覆盖input默认样式

一、修改场景：默认的样式通过和背景颜色不一致，有一些突兀，体验不好。

二、问题根因：谷歌默认的样式为淡黄色

三、解决思路

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;
}