input去除自动填充后样式

input去除自动填充后样式

常见于登录页面，浏览器设置了记住密码后，input会自动填充内容，造成填充内容后的input会变色，色值不定，反正就是不好看。

原因

input自动填充的样式是用Shadow-dom的方式实现的，游离于DOM 树之外的节点树，不好通过css直接修改。要开启谷歌浏览器的Show user agent shadow DOM设置才能看到对应的css。

解决方法

1、关闭自动填充表单功能

此方式对直接用form和input写的页面有效，对一些封装的第三方UI不大友好，例如elementUI。会不生效。

<form autocomplete="off">
<input type="text" autocomplete="off">

2、设置input样式动画

此方式最直接有效，全局设置，延长自动填充背景色动画的时间，对原生或封装的UI都很友好，推荐使用。

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

参考

Shadow-dom相关可参考此文，很详细 shadow dom的作用和用法详解(createShadowRoot, attachShadow)