我有一个包含 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 建议列表中的元素时，才会发生这种情况。如果字段填充的值不在列表中，则不会应用样式。
问候 詹姆
为了摆脱不良行为，这个技巧“正好有效”（tm）：
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 0s 600000s, color 0s 600000s !important;
}
编辑：正如 @Spock 在评论中提到的，您可能希望增加此样式的特异性，以防存在来自另一个库的竞争设置。因此，将
!important答案并不直观。这比其他任何东西都更像是一种技巧，但看起来它是唯一有效的：
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px yellow inset;
}
这将为您的输入设置
yellow如果您对浅色主题上的默认
-internal-autofill-selectedinput {
color-scheme: dark;
}
我尝试覆盖样式，但由于某种原因它根本不起作用。 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 创建者认为他们绝对必须将背景图像设置为无，但如果他们想要战争，他们可以拥有它。
您可以添加框阴影来去除蓝色背景
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
您可以添加自己的 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/
我稍微调整了@kostiantyn-ko 的答案，使其仅适用于无效输入。
萨斯：
input {
&:is(:invalid, [aria-invalid=true]) {
// your error styles
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
// hack needed to get rid of autofill styles only on invalid forms
&:is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
}
}
CSS：
/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
}
/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
这种方式应该可行（记住根据需要切换样式）：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
border: 1px solid rgba(255, 255, 255, 0.25);
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0px 1000px rgb(232, 240, 254) inset;
transition: background-color 5000s ease-in-out 0s;
}
我尝试了许多上述解决方案，但没有任何效果。但后来偶然发现了一个新的
input:autofill:root {
--background-color: #000; // you can use any color, mine was #000
}
input:autofill {
box-shadow: inset 0 0 0 100px var(--background-color);
}
万一有人仍在寻找解决方案......这对我有用。
.inputDiv input.filled-input:-webkit-autofill,
.inputDiv input.filled-input {
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-box-shadow: inset 0 0 0 100px var(--filled-color);
outline: var(--border) var(--secondary-color) !important;
}根据您的情况，如果您根本不需要自动填充，这可能会有所帮助：
在输入属性中添加 autocomplete="off"。
这对我来说是这样:-)
我已经做了自己的审查，这是我想出的最佳解决方案。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid transparent !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
transition: background-color 5000s ease-in-out 0s !important;
}
来自
的想法https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/