Css 如何避免-选择内部自动填充"；要应用的样式？

我有一个带有两个字段的登录表单，用户名和密码。用户名字段由chrome自动完成。当我提交表单时（当表单有效时），会神秘地应用此样式：

input:-internal-autofill-selected {s ñ
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

有没有办法避免这种情况？表单是使用Ajax提交的，所以如果用户名字段应用了这种样式，那么表单就有点难看，而密码字段则没有

我注意到，只有当字段中填充了chrome Suggestions列表中的元素时，才会发生这种情况。如果字段中填充的值不在列表中，则不应用样式

问候

---

Jaime

您可以添加自己的CSS，以便更新的状态与常规输入状态匹配。将一个额外的类与一起添加到您的声明中！重要属性应该覆盖它

因此：

---

顺便说一句，我还发现：

答案并不直观。这更像是一个把戏，但它似乎是唯一有效的把戏：

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px yellow inset;
}

---

这将为您的输入设置一个

黄色
背景。这基本上是一个非常不透明和压倒性的内部阴影。它们在@ravb79中使用了相同的技巧。
您可以添加一个方框阴影来删除蓝色背景

box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);

我试图覆盖样式，但由于某种原因，它根本不起作用。Webkit或至少chrome忽略了这种风格

当我加上！对于webkit/chrome的风格很重要，只是将其从等式中完全删除。元素检查器中找不到任何位置

我尝试过的一切要么被忽略，要么被删除

苏欧，我想出了这个可怕的废话。但到目前为止，它仍然有效

// Fix autocomplete shit
function fix_autocomplete_shit() {
    setTimeout(() => {
        if ($(this).is(':-internal-autofill-selected')) {
            var clone = $(this).clone(true, true);
            $(this).after(clone);
            $(this).remove();
        }
    }, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);

我使用的是引导，我希望以背景图像的形式保留验证图标

只有上帝知道为什么webkit的创建者认为他们绝对必须将背景图像设置为“无”，但如果他们想要战争，他们可以拥有它。
最佳答案。URL中的答案显然有效。。。
// Fix autocomplete shit
function fix_autocomplete_shit() {
    setTimeout(() => {
        if ($(this).is(':-internal-autofill-selected')) {
            var clone = $(this).clone(true, true);
            $(this).after(clone);
            $(this).remove();
        }
    }, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);