消除input标签的自动填充 白色背景 及更改字体颜色

一、 问题重现

在我门开发过程中难免会遇到这样的问题：

用户可能会选择浏览器自动填充

选择之后就变成了这样，很难看

二、问题解决

<input type='text'/> <!-- 假设我们的html是这样 -->

我们可以用

autofill伪类来控制

css

input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

这样就能解决白色背景的问题：

但是 字体确是黑色，而且也不受color影响。

我们用另一个css熟悉解决

text-fill-color用来控制input自动填充的字体颜色

input {-webkit-text-fill-color: #9cc5ec; //颜色是设置成你需要的颜色}

这样就解决了

附 MDN 文档

都是文档上的