自动填充autofill 是项提升使用体验的方式。
浏览器对 input[type=password] 的输入控件会提示‘记住密码’的操作，如果选择记住密码后，下次再次登录时，密码用户名会自动填充至控件中，如下图:
- 初始状态：
- 记住密码后
问题出现了，自动填充后，输入控件的样式发生了变化,我们该如何解决这个问题？
首先，填充样式的来源浏览器默认样式：
input:-internal-autofill-selected {
-webkit-appearance: menulist-button;
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
是因为浏览器设置了默认的背景和字体颜色，而且优先级很高，我试着直接设置 input 的background，color 事实证明无效，只得想其他办法
分析原因： 白色的背景色是background-color导致的，既然无法修改此属性，我们可以减少它的影响范围，background-clip可以满足需要，于是第一种解决方案出来了
解决方式：
1. 设置background-clip
input {
background-clip： text;
}
// 背景色消失，字体颜色为背景色（白色），一般情况下，我们的输入控件字体，就是白色，问题解决！
缺点：字体颜色只能是默认的背景色，问题不大，但是如果想要自由的设置颜色呢，接着往下看？
我们找到了 -webkit-text-fill-color 属性，此属性可以设置填充字体颜色
input {
background-clip： text;
-webkit-text-fill-color: #c0aefa; // 改变了字体颜色
}
现在应该可以满足我们的绝大部分需求了。
初次之外，还有其他的解决方法，以供备选,背景色无法修改，那我们可以使用厚厚的阴影掩盖它 box-shadow
2. 设置box-shadow
此属性可以设置填充字体颜色
// input {
input:-internal-autofill-selected {
box-shadow: inset 0 0 0 1000px #281840 !important; // 改变了背景色
-webkit-text-fill-color: #c0aefa; // 改变了字体颜色
}
缺点：颜色无法设置为透明（transparent),如果页面存在背景色，无法透明。如果控件有自己的背景，则无此问题。
3 覆盖属性+clip
和方法1类似，设置背景色只影响content,再把高度置为0，效果一样，为什么不用方法1呢？
input {
height: 0;
padding: 1.2em .5em;
background-clip: content-box;
&::first-line{
color: white !important; // 设置输入内容的样式
}
-webkit-text-fill-color: #DCFDFF; // 改变了字体颜色
}
3. 不要填充
哈哈哈，等于没说！😜
<input type="text" autocomplete="off">
总结：
-
默认字体颜色可以修改（ -webkit-text-fill-color）
-
默认背景色无法被修改
- background-clip 减小背景色的影响范围
- box-shadow 使用阴影颜色覆盖背景色
