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

【问题标题】：How to avoid "-internal-autofill-selected" style to be applied?如何避免应用“-internal-autofill-selected”样式？
【发布时间】：2020-07-19 20:50:54
【问题描述】：

我有一个包含 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 提交的，所以如果 Username 字段应用了该样式，则有点难看，但 Password 字段则没有。

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

问候詹姆

【问题讨论】：

标签： css google-chrome

【解决方案1】：

为了摆脱不受欢迎的行为，这个技巧“有效”（tm）：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你可以添加一个盒子阴影来去除蓝色背景

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

【讨论】：

【解决方案4】：

您可以添加自己的 CSS，以便更新后的状态与您的常规输入状态相匹配。在声明中添加一个额外的类以及 !important 属性应该覆盖它。

所以：

input.my-input {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

input.my-input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

顺便说一句，我也找到了这个：https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

【讨论】：

【解决方案5】：

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

当我将 !important 添加到样式 webkit / chrome 时，完全将其从等式中完全删除。在元素检查器中无处可见。

我尝试过的所有内容都被忽略或删除。

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

// 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 的创建者认为他们绝对必须将 background-image 设置为 none，但如果他们想要战争，他们可以拥有它。

【讨论】：

【解决方案6】：

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

input {
  color-scheme: dark;
}

【讨论】：