输入框CSS样式问题：输入内容改背景色及覆盖Chrome自动填充黄色

一、实现输入框输入时改变背景颜色 #

要实现输入框在用户输入时改变背景色，我们可以利用CSS伪类监听输入框的状态，常用的有两种场景：

• 用户开始输入时触发：用:focus伪类，当用户点击输入框获得焦点、开始输入时，立刻切换背景色。
• 输入框有内容时保持样式：结合:not(:placeholder-shown)伪类，即使用户输入后离开输入框，只要框内有内容，就维持自定义背景色。

示例CSS代码：

/* 输入框获得焦点（正在输入）时的样式 */
input:focus {
  background-color: #e8f0fe;
  outline: none; /* 可选：移除浏览器默认的焦点边框 */
  border-color: #6366f1; /* 可选：自定义焦点边框颜色 */
}

/* 输入框有内容时的样式（即使失去焦点） */
input:not(:placeholder-shown) {
  background-color: #e8f0fe;
}

你可以根据设计需求调整background-color的取值，搭配其他样式让输入框更贴合你的页面风格。

二、覆盖Chrome Autofill的淡黄色背景 #

Chrome对自动填充的输入框会强制添加淡黄色背景，普通的:focus、:active伪类确实无法覆盖——这是因为Chrome的内部样式优先级极高。解决这个问题需要用到Chrome专属的:-webkit-autofill伪类，再配合一些技巧确保样式生效：

示例CSS代码：

/* 覆盖Chrome自动填充的所有状态 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 设置自定义背景色 */
  background-color: #ffffff !important;
  /* 用inset阴影填满输入框内部，彻底挡住默认淡黄色背景 */
  box-shadow: 0 0 0 30px #ffffff inset !important;
  /* 确保文字颜色不受自动填充样式影响 */
  -webkit-text-fill-color: #2d3748 !important;
  /* 禁用Chrome的背景色过渡动画，避免淡黄色闪烁 */
  transition: background-color 5000s ease-in-out 0s;
}

关键细节说明： #

1. !important必须加：用来强制覆盖Chrome的默认样式优先级，否则自定义背景色会被忽略。
2. box-shadow技巧：单纯设置background-color有时会失效，用inset阴影填满输入框内部，能彻底屏蔽默认的淡黄色背景。
3. 超长过渡延迟：把过渡时间设为5000秒，相当于禁用了Chrome自动填充时的背景色变化动画，避免出现短暂的淡黄色闪烁。

内容的提问来源于stack exchange，提问作者J. Doe