浏览器自带填充功能影响输入框背景

解决浏览器中自动添加账号密码时,背景颜色覆盖的问题(万能)

问题:使用浏览器自带的填充账号、密码时输入框背景出现覆盖的问题。
浏览器自带填充功能影响输入框背景_第1张图片

有多种解决方法,此方法是推荐的。兼容性好、无其它问题

解决代码:

// 解决浏览器中自动添加账号密码时,背景颜色覆盖的问题
   // 实现原理:
   // 99999s 基本上就是一个无限长的时间
   // 通过添加过渡动画延长增加自动填充背景色的方式, 是用户感受不到样式的变化
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
       transition-delay: 99999s;
       transition: color 99999s ease-out, background-color 99999s ease-out;
   }

你可能感兴趣的:(前端,动画,javascript,css,vue.js,前端)