如何通过CSS阻止自动填充输入框的背景变为蓝色？

Chrome的自动填充功能会给输入框添加特殊内置样式，普通的background-color属性无法覆盖默认的蓝色背景，这就是你之前的代码无效的原因。以下是几种可行的解决方法：

方法1：使用box-shadow覆盖背景 #

利用box-shadow填充输入框内部区域，替代背景色，以此覆盖Chrome自动填充的蓝色：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 用box-shadow填充整个输入框，颜色设为你需要的背景色（示例为白色） */
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  /* 如需修改文字颜色，添加以下属性 */
  -webkit-text-fill-color: #333 !important;
}

!important用于强制覆盖Chrome的默认样式，30px的阴影范围足够覆盖大多数输入框高度。

方法2：禁用自动填充（按需使用） #

如果不需要密码管理器自动填充该输入框，可通过设置autocomplete属性避免样式问题：

• 完全禁用自动填充：

<input type="password" autocomplete="off">

• 针对密码框，告知浏览器这是新密码（不会触发已有密码填充）：

<input type="password" autocomplete="new-password">

注意：该方法会影响用户体验，仅在不需要自动填充的场景使用。

方法3：延迟背景色过渡 #

通过设置超长的过渡延迟，让Chrome的自动填充背景色变化无法立即显示：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}

原理是将背景色过渡时间设为5000秒，相当于用户正常使用期间看不到蓝色背景。

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