Chrome浏览器下input输入框背景被黄色覆盖

Webkit内核的浏览器有一个-webkit-autofill私有属性，

通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189); /* #FAFFBD; */
  background-image: none;
  color: rgb(0, 0, 0);
}

如果input文本框是纯色背景的

解决办法：

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #333;
}

或者 禁止输入框自动填充。

input在没有自动获取到输入的值时颜色不会改变

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

由于本人是用的灰色半透明的背景 所以两种方法都不能从根本上解决问题

只能给input输入框一个时间很长的delay，一般用户不会等很久所以也就不会看到变色背景。

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