chrome表单自动填充导致input文本框背景变成偏黄色问题解决

针对这个问题，我将提供以下攻略，包括问题背景、原因探究、解决方案等。

问题背景

在使用Chrome浏览器自动填充表单时，有时可能会发现表单中的文本框背景变成了偏黄色，而且无法用css样式覆盖。

原因探究

造成这个问题的原因有很多，其中一种最常见的原因是Chrome浏览器表单自动填充功能的特殊性质。自动填充会在文本框内生成一个额外的元素，这个元素的样式不受css控制，因此文本框的背景颜色会变成偏黄色。

解决方案

有多种解决方案可以解决这个问题，下面我将提供其中两种示例。

解决方案1：使用-webkit-autofill伪类

我们可以利用-webkit-autofill伪类来解决这个问题。具体方法如下：

input:-webkit-autofill {
    background-color: white !important;
}

• 加一个:required伪类，可以限定只对必填项的背景色生效。
• 这个解决方案只适用于Chrome浏览器，其他浏览器无效。

解决方案2：使用javascript清除自动填充

我们可以通过javascript清除自动填充，从而解决这个问题。具体方法如下：

window.addEventListener("load", function () {
    var form = document.getElementById("form-id");
    form.autocomplete = "off";
    setTimeout(function() {
        form.autocomplete = "on";
    }, 1);
});

• 这个方法是在页面加载完成后执行清空自动填充，通过setTimeout方法的异步机制让它重回自动填充状态，从而解决背景变色问题。
• 这个方法适用于所有浏览器。

总结

以上是两种解决方案，可以帮助您解决Chrome表单自动填充导致input文本框背景变成偏黄色的问题。但是，不同情况下，不同的解决方案可能更适合你的需求。因此，你需要对你的具体情况进行分析，并选择最合适的方法来解决这个问题。