如何设置浏览器自动填充输入框样式，实现背景透明效果？

如图所示，当浏览器对输入框进行自动填充时，输入框背景会变为白色。我希望将其设置为如下方示例输入框那样的透明背景效果，请教如何实现该样式设置？

可以通过CSS伪类覆盖浏览器自动填充的默认样式，以下是针对不同内核浏览器的解决方案：

WebKit内核浏览器（Chrome、Safari等） #

使用:-webkit-autofill伪类，通过内阴影和过渡属性强制设置透明背景：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 用透明内阴影覆盖默认白色背景 */
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  /* 可选：设置输入框文字颜色 */
  -webkit-text-fill-color: #333 !important;
  /* 延长背景色过渡时间，阻止浏览器替换背景 */
  transition: background-color 5000s ease-in-out 0s;
}

Firefox浏览器 #

使用标准的:autofill伪类直接设置透明背景：

input:autofill,
input:autofill:hover,
input:autofill:focus {
  background-color: transparent !important;
  /* 可选：设置输入框文字颜色 */
  color: #333 !important;
}

说明：直接设置background-color在WebKit浏览器中可能不生效，因此用内阴影的方式替代；过渡属性是为了让浏览器不会在自动填充时立刻替换背景色。

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