自动填充autofill 是项提升使用体验的方式。

浏览器对 input[type=password] 的输入控件会提示‘记住密码’的操作，如果选择记住密码后，下次再次登录时，密码用户名会自动填充至控件中，如下图:

问题出现了，自动填充后，输入控件的样式发生了变化,我们该如何解决这个问题？

首先，填充样式的来源浏览器默认样式：

是因为浏览器设置了默认的背景和字体颜色，而且优先级很高，我试着直接设置 input 的background，color 事实证明无效，只得想其他办法

分析原因： 白色的背景色是background-color导致的，既然无法修改此属性，我们可以减少它的影响范围，background-clip可以满足需要，于是第一种解决方案出来了

解决方式：

1. 设置background-clip

缺点：字体颜色只能是默认的背景色，问题不大，但是如果想要自由的设置颜色呢，接着往下看？

我们找到了 -webkit-text-fill-color 属性，此属性可以设置填充字体颜色

现在应该可以满足我们的绝大部分需求了。

初次之外，还有其他的解决方法，以供备选,背景色无法修改，那我们可以使用厚厚的阴影掩盖它 box-shadow

2. 设置box-shadow

此属性可以设置填充字体颜色

缺点：颜色无法设置为透明（transparent),如果页面存在背景色，无法透明。如果控件有自己的背景，则无此问题。

3 覆盖属性+clip

和方法1类似，设置背景色只影响content,再把高度置为0，效果一样，为什么不用方法1呢？

3. 不要填充

哈哈哈，等于没说！😜

默认字体颜色可以修改（ -webkit-text-fill-color）

默认背景色无法被修改