如何避免应用“-internal-autofill-selected”样式？

Question

我有一个包含 2 个字段、用户名和密码的登录表单。用户名字段由 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 建议列表中的元素填充时才会发生这种情况。如果字段填充的值不在列表中，则不会应用该样式。

问候海梅

Answer 1

为了摆脱不良行为，这个技巧“有效”（tm）：

  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
  }

编辑：正如 @Spock 在评论中提到的，您可能希望增加此样式的特异性，以防存在来自另一个库的竞争设置。因此，添加!important到上面的代码片段以确保它按原样适用于更广泛的受众。

Answer 2

如果您对浅色主题的默认样式感到满意-internal-autofill-selected，并且只想让它在深色主题中看起来更好，那么您可能只需要：

input {
  color-scheme: dark;
}

Answer 3

答案并不直观。这比其他任何东西都更像是一种技巧，但看起来它是唯一有效的方法：

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

这将为yellow您的输入设置背景样式。它基本上是一个非常不透明和压倒性的内部阴影。他们在@ravb79 发送的链接中使用了相同的技巧。

Answer 4

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

当我将 !important 添加到 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 的创建者认为他们绝对必须将背景图像设置为无，但如果他们想要战争，他们可以拥有它。

Answer 5

您可以添加一个框阴影来删除蓝色背景

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