如何修改 chrome 记住密码后自动填充表单的黄色背景

如何修改 Chrome 记住密码后自动填充表单的黄色背景？

Chrome 表单自动填充后，input 文本框的背景会变成黄色的，通过审查元素可以看到这是由于 Chrome 会默认给自动填充的 input 表单加上 input:-webkit-autofill 私有属性，然后对其赋予以下样式：

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

对 Chrome 默认定义的 background-color、background-image、color 使用 !important 是不能提高其优先级的，但是其他属性可使用。

使用足够大的纯色内阴影来覆盖 input 输入框的黄色背景，处理如下：

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    border: 1px solid #CCC !important;
}

补充：

• Chrome 86+ 起，表单自动填充时不再添加内阴影的黄色背景，已基本不再需要此 hack。
• 当前推荐做法是配合 autocomplete="off"、控制台关闭"自动填充"开关，或在更现代的工程中用组件库（如 Ant Design）自带的主题变量覆盖。