设置 文本框 自动填充背景颜色 为白色

关于autofill伪类的 兼容性：

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

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

---

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

方法一:box-shadow

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

---

浏览器的 自动填充机制 在 渲染页面 之后 才会生效，会覆盖设置的CSS样式。为了解决这个问题，你可以使用 transition 属性来延迟样式的生效时间。。。。

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

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;

input {
    /*必须为background-color属性、或all 加上 过渡效果，不然不会生效！！*/

    background-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

---

啰嗦一下：

/* 三合一，遇到问题再调整 */
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;
}