Chrome自动填充干扰自定义主题样式，已尝试方案无效寻求解决办法

我制作了一个带有优质CSS的模板，要求输入框背景透明、文字颜色为白色，但Chrome的自动填充功能完全破坏了这个主题样式。试过网上各类方案均无效，其中一种尝试的代码如下：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  color: #ffffff !important;
  background-color: transparent !important;
}

有效解决方案 #

Chrome的自动填充机制会强制覆盖输入框的背景色和文字样式，普通的background-color声明无法生效。可以通过以下CSS规则解决：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 用透明阴影覆盖Chrome自动填充的默认背景 */
  -webkit-box-shadow: 0 0 0 100px transparent inset !important;
  /* 强制设置文字为白色 */
  -webkit-text-fill-color: #ffffff !important;
  /* 保留背景透明的基础设置 */
  background-color: transparent !important;
  /* 延迟背景色过渡，避免自动填充时的样式跳动 */
  transition: background-color 9999s ease-in-out 0s;
}

原理说明

1. -webkit-box-shadow：利用阴影填充整个输入框区域，覆盖Chrome自动填充添加的默认背景，模拟透明效果；
2. -webkit-text-fill-color：直接指定文字颜色，优先级高于Chrome自动填充的默认文字样式；
3. 长延迟的transition：阻止Chrome在自动填充时触发背景色的瞬时变化，确保样式稳定。

内容的提问来源于stack exchange，提问作者Noor ul ain Ibrahim