HTML/CSS：表单输入文本时背景色被覆盖的问题如何解决

你遇到的背景色被覆盖问题是浏览器内置的表单自动填充（Autofill）功能的默认样式导致的：

• 基于Chromium内核的浏览器（Chrome、Edge、新版Opera等）会对触发自动填充的输入框自动应用:-webkit-autofill伪类的内置样式，其中就包含background-color: rgb(232, 240, 254)的规则
• 浏览器内置样式的优先级高于你自定义的.search_input_area类样式，哪怕你写了hover状态的白色背景，只要触发自动填充就会被强制覆盖
• 输入内容后触发是因为你输入的内容匹配了浏览器之前保存的同字段填充记录，或主动选择了自动填充建议项，进而触发了该伪类样式

最稳妥的解决方案是通过内阴影覆盖默认填充背景，直接修改background-color通常会被浏览器强制拦截，样式不生效：
在你的CSS代码中添加如下规则即可：

/* 覆盖自动填充的默认样式，适配悬停、聚焦等全状态 */
.search_input_area:-webkit-autofill,
.search_input_area:-webkit-autofill:hover,
.search_input_area:-webkit-autofill:focus,
.search_input_area:-webkit-autofill:active {
  /* 用大面积白色内阴影盖住浏览器自带的浅蓝色背景 */
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  /* 同步固定文字颜色，避免被浏览器修改 */
  -webkit-text-fill-color: rgba(0, 0, 0, 0.87) !important;
}

如果需要兼容火狐浏览器，可以额外补充火狐专属的自动填充伪类规则：

.search_input_area:-moz-autofill,
.search_input_area:-moz-autofill:hover,
.search_input_area:-moz-autofill:focus {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -moz-text-fill-color: rgba(0, 0, 0, 0.87) !important;
}

如果不需要自动填充功能，也可以给输入框添加autocomplete属性关闭填充提示，作为补充方案：

<input name="q" type="text" class="search_input_area" autocomplete="off">

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