Chrome/Chromium Edge自动填充输入框样式异常的解决方法求助

Chrome及Chromium内核的Edge浏览器中，表单自动填充时会覆盖输入框的自定义字体样式（字号、字体族等），点击页面后才恢复，以下是可行的解决方案：

方案1：利用:-webkit-autofill伪类强制设置样式 #

Chrome会给自动填充的输入框添加:-webkit-autofill伪类，直接针对该伪类定义你需要的样式，即可覆盖浏览器默认的自动填充样式：

/* 覆盖自动填充状态下的输入框样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  font-size: 24px; /* 替换为你设置的大字号 */
  font-family: "你的自定义字体", sans-serif; /* 替换为你的字体族 */
  /* 若自动填充时背景色也异常，可添加以下代码修复 */
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
}

这个方案无需额外脚本，直接通过CSS解决，是最推荐的方式。

方案2：通过JavaScript触发样式重绘 #

如果伪类样式不生效，可通过脚本强制浏览器重新渲染输入框样式：

// 监听输入框的输入事件（自动填充会触发该事件）
document.querySelectorAll('input[type="text"], input[type="password"]').forEach(input => {
  input.addEventListener('input', () => {
    // 短暂隐藏再显示输入框，触发样式重绘
    input.style.display = 'none';
    setTimeout(() => input.style.display = '', 0);
  });
});

方案3：调整autocomplete属性（权衡使用） #

通过修改autocomplete属性禁用自动填充，但会影响用户体验，仅在必要时使用：

• 密码框设置autocomplete="new-password"：Chrome会忽略自动填充建议
• 输入框设置autocomplete="off"：部分版本Chrome可能会忽略该设置

内容的提问来源于stack exchange，提问作者stefanu