需重置浏览器自动填充样式以恢复:focus效果：用.form-input:-webkit-autofill清除背景色和文本色，设transparent背景及过渡延迟防闪烁，并统一autocomplete属性值提升兼容性。
在 H5 表单中，浏览器自动填充（autocomplete）的输入框（如邮箱、密码、姓名等）默认会添加一层黄色或浅蓝色背景，这是 Chrome、Edge 等基于 Chromium 的浏览器的内置样式。这种样式有时会覆盖你自定义的 :focus 效果，导致聚焦阴影失效。
识别并覆盖浏览器自动填充样式
Chrome 会为自动填充的输入框注入伪元素 ::-webkit-autofill，它拥有更高优先级的默认样式（比如 background-color: rgb(250, 255, 189)）。要让聚焦阴影生效，必须先重置它的背景和颜色，再显式定义聚焦状态。
- 给 input 添加 class（例如
form-input），便于精准控制 - 用
::-webkit-autofill清除默认背景和文本色 - 配合
:focus或:focus-within添加 box-shadow
关键 CSS 写法（兼容主流场景）
以下是一段实用、简洁的 CSS 示例：
.form-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: all 0.2s ease;
}
<p>.form-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}</p><p>/<em> 覆盖 Chrome 自动填充背景 </em>/
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25) inset;
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25) inset;
-webkit-text-fill-color: #333;
background-color: transparent !important;
background-image: none;
transition: background-color 5000s ease-in-out 0s;
}
注意：transition: background-color 5000s 是一种“欺骗”技巧，让浏览器认为背景变化极慢，从而抑制自动填充后又突然变色的闪烁问题。
增强兼容性的小技巧
- 如果表单用了
<fieldset>或父容器有:focus-within需求，可对容器加聚焦阴影，避免子元素被 autofill 干扰 - 密码字段可能触发更严格的 autofill 样式，建议统一用
input[type="password"]单独强化规则 - Safari 对
::-webkit-autofill支持较弱，可结合onload或setTimeout检测并补丁样式（非必需，多数项目忽略即可）
HTML 结构建议
保持语义化，有助于浏览器更好识别字段用途，提升自动填充准确率，也间接减少样式异常：
<input type="email" name="email" class="form-input" autocomplete="email" required> <input type="password" name="password" class="form-input" autocomplete="current-password" required>
确保 autocomplete 属性值规范（如 email、given-name、current-password），能显著提升 autofill 可靠性，也让样式修复更稳定。
