Chrome 的自动填充表单的黄色背景是由浏览器默认样式控制的，你可以通过 CSS 来修改它。 主要有以下几种方法：
1. 使用 -webkit-autofill 伪类:
这是最常用的方法，可以直接针对自动填充的表单元素应用样式。
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #your-background-color !important; /* 例如: #ffffff 或 rgba(255, 255, 255, 0.8) */
background-image: none !important;
color: #your-text-color !important; /* 例如: #000000 */
-webkit-box-shadow: 0 0 0 1000px #your-background-color inset !important; /* 延伸背景色到输入框内部 */
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
background-color: #your-focus-background-color !important; /* 获得焦点时的背景色 */
}
!important是必要的，因为浏览器默认样式的优先级很高。-webkit-box-shadow技巧是为了覆盖 Chrome 默认的淡黄色阴影，并确保背景色完全填充输入框，包括 padding 区域。 将1000px调整为一个足够大的值即可。- 可以根据需要设置
color属性来调整文本颜色。
2. 短暂延迟后再应用样式:
由于自动填充是浏览器异步完成的，有时直接应用样式可能无效。 可以使用 JavaScript 添加一个短暂的延迟，然后再应用 CSS 样式。
setTimeout(function() {
document.querySelectorAll('input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill').forEach(el => {
el.style.backgroundColor = '#your-background-color';
// ...其他样式
});
}, 100); // 延迟 100 毫秒
3. 使用图片背景:
你可以使用图片背景来覆盖自动填充的黄色背景。
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-image: url('your-background-image.png') !important;
}
4. 禁用自动填充 (不推荐):
虽然可以禁用自动填充，但这会降低用户体验，不推荐使用。
- 在单个 input 元素上禁用：
<input type="text" autocomplete="off"> - 在表单级别禁用：
<form autocomplete="off"> ... </form>
选择哪种方法?
第一种方法 -webkit-autofill 伪类是最常用和推荐的方法。 如果遇到问题，可以尝试结合第二种方法添加短暂延迟。 使用图片背景的方法需要额外的图片资源，灵活性较差。 禁用自动填充会影响用户体验，应尽量避免。
额外提示:
- 为了确保样式生效，最好将 CSS 放在你的网站的
<head>部分，或者放在一个单独的 CSS 文件中，并将其链接到你的 HTML 文件中。 - 测试不同浏览器: 虽然这些方法主要针对 Chrome，但也可能适用于其他基于 Chromium 的浏览器。 最好在不同的浏览器中测试你的代码，以确保兼容性。
希望这些信息能帮到你!
标签：填充,chrome,表单,color,autofill,important,background,webkit From： https://www.cnblogs.com/ai888/p/18560451