Chrome 自动填充样式产生的原因

通过查看标签的样式发现，自动填充的 input 标签新增了样式，并且该样式无法被覆盖。

1
2
3
4
5
6
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}

解决方案

目前（当前：2023/03/20），解决方式有如下几种：

关闭自动填充功能

因为自动填充功能产生的问题，那么直接关闭即可解决问题。

1
<input autocomplete="off">

适合信息敏感的情况（例如：密码），可以使用这种方法。

使用 CSS 动画解决

通过使用 CSS 动画延迟，使自动填充样式延迟生效，只要时间足够长，页面停留足够短，相当于样式没变化。

1
2
3
4
5
6
7
8
9
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {    
    transition-delay: 360000s;
    transition: color 360000s ease-out, background-color 360000s ease-out;
    -webkit-transition-delay: 360000s;
    -webkit-transition: color 360000s ease-out, background-color 360000s ease-out;
}

适合用户停留短暂页面，例如登录页面。

使用内阴影覆盖

通过阴影将背景覆盖掉。

1
2
3
input {
	box-shadow: 0 0 0px 1000px white inset;
}

适合非透明背景的情况。

利用 background-clip 背景裁剪

利用 background-clip 属性，将背景裁剪掉。

背景颜色默认渲染到 padding-box 中，可以设置 background-clip: centent-box 渲染到 content-box 中。

1
2
3
4
5
input {
    height: 0;
    padding: .75em 0;
    background-clip: content-box;
}

Chrome 自动填充样式除了背景以外，还有字体相关样式，可以通过 ::first-line 伪类解决。

1
2
3
input:first-line {
    color: #555;
}

除此以外，当鼠标悬浮在自动输入列表元素时，还会产生字体样式的变化，可以通过 CSS 动画解决。

1
2
3
4
5
6
7
8
9
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition-delay: 360000s;
    transition: color 360000s ease-out;
    -webkit-transition-delay: 360000s;
    -webkit-transition: color 360000s ease-out;
}

这种方法相对而言比较通用，可以比较好地应用各种场景。

参考资料

__END__