css设置字体自动填充解决系统自动填充输入框时，背景颜色不同的情况

背景

移动端测试时，发现安卓手机的自带的密码保管箱功能会让输入框的背景色改变。这跟chrome，或者火狐等浏览器提供的密码保管箱功能一致，自动填充账号密码。但是有时候我们的需求是希望填充的账号密码，不要代入那个背景色。

问题

1.正常输入框的背景色 与 正常输入文字之后的背景框颜色，都是一致的

2.使用密码箱的自动填充功能填入，输入框的背景色，变成了浅蓝灰色。

解决方案

1.使用input的伪元素:-webkit-autofill，配置-webkit-background-clip:text;-webkit-text-fill-color:#000;实现使用原来的背景色效果

input:-webkit-autofill {
	// 填充伪元素
   -webkit-background-clip: text; /* 据背景色剪裁字体填充进输入框 */
   -webkit-text-fill-color: #000; /* 填充字体色-根据自己想要的字体颜色进行填充 */
}

实现效果：这是背景使用原来的背景色

2.同样使用input的伪元素:-webkit-autofill，配置box-shadow和-webkit-text-fill-color:#000;实现使用自己选择的背景色效果，这里需要白色背景，所以阴影色选择 #fff,注意:使用的是内阴影，覆盖原输入框里的背景色，实现相似的效果

/* 白色 */
input:-webkit-autofill {
     /* -webkit-background-clip: text;  */
      box-shadow: 0 0 0 1000px #fff inset !important;
      -webkit-text-fill-color: #000; /* 填充字体色-根据自己想要的字体颜色进行填充 */
}
/* pink色 */
input:-webkit-autofill {
    /* -webkit-background-clip: text;  */
    box-shadow: 0 0 0 1000px pink inset !important;
    -webkit-text-fill-color: #000; /* 填充字体色-根据自己想要的字体颜色进行填充 */
}

白色内阴影效果：

其他色内阴影效果：

其他补充

1.以上需要考虑浏览器的兼容
2.浏览器属性兼容的查询网址[自己查看是否适合]：https://caniuse.com/
3.有其他方案，欢迎让我补充笔记，感恩！