将文本框默认背景重置为白色

关于autofill伪类的 兼容性：

在现代浏览器中，包括Chrome、Safari、Firefox等，都支持:autofill伪类，但在使用时必须加上浏览器前缀-webkit-，即:-webkit-autofill。

在旧版的浏览器中，可能不支持:autofill伪类，需要使用其他的hack方法来实现。同时，不同浏览器也可能对:-webkit-autofill的支持程度不同，需要根据实际情况来选择合适的hack方法。

经测试，貌似不用-webkit-autofill也可以。某些情境下可能需要使用 :-webkit-autofill伪类。具体情况，具体分析。【以下 方法中的 属性值 最好都加 “! important”，以绝后患！】

方法一:box-shadow

1
2
3
4
5
6
7
8
9
10
input:-webkit-autofill {
    color: transparent;
    background-clip: content-box;
    background-color: white;
    caret-color: black;
    /*光标设置为 黑色*/
/*上面根据具体情境 可选，box-shadow最重要！！*/
-webkit-box-shadow: 0 0 0 1000px white inset !important;
box-shadow: 0 0 0 1000px white inset !important;
}

方法二:-webkit-text-fill-color 和 transition: background-color 5000s ease-in-out 0s;

1
2
3
4
5
input {
    /*必须为background-color属性(即便这里没有设置background-color)、或all 加上 过渡效果，不然不会生效！！*/
-webkit-text-fill-color: #333333 !important;
transition: background-color 5000s ease-in-out 0s;
}

方法三:background-color 和 transition: background-color 5000s ease-in-out 0s;

1
2
3
4
5
input {
    /*必须为background-color属性、或all 加上 过渡效果，不然不会生效！！*/
  background-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

啰嗦一下：

1
2
3
4
5
6
7
/* 三合一，遇到问题再调整 */
input:-webkit-autofill {
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #333333 !important;
    background-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}