关于浏览器input框自动填充出现的很丑的背景色的解决方案

233 阅读1分钟

第一种:直接关闭input框的自动填充

autocomplete="off"

第二种:设置input框的内阴影(要求input是纯背景色的情况)

 &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #889aa4 inset !important;
        -webkit-text-fill-color: $cursor !important;
      }

第三种:通过延长增加自动填充背景色的方式, 使用户感受不到样式的变化

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;

}