:focus 伪类需清除 outline、覆盖 background-image 并确保元素可聚焦，否则背景色不生效；移动端需配合 :focus-within 防闪烁，推荐用 brightness 或透明度微调替代纯色切换。
直接用 :focus 设置背景色就行，但要注意默认样式干扰
浏览器对 、 等表单控件有内置焦点样式（比如 Chrome 会加一圈蓝色外边框），它可能盖住或削弱你设的背景色。单纯写 input:focus { background: #e0f7fa; } 有时没反应，不是语法错，而是被默认 outline 或用户代理样式压制了。
- 必须显式清除或重置
outline，否则背景变色后仍有一圈高亮边框，视觉冲突 -
background-color要用不透明值（如#fff、rgb(255,255,255)），避免用transparent或继承父级色 - 如果输入框本身有
background-image（比如带图标的搜索框），:focus里得一并覆盖掉，否则新背景色不生效
为什么 :focus 不生效？常见三类原因
不是所有“看起来像输入框”的元素都支持 :focus。以下情况会导致伪类失效：
-
tabindex="-1"或disabled属性存在 → 元素无法获得焦点，:focus永远不触发 - 用了
contenteditable="true"但没设tabindex→ 需手动加tabindex="0"才能聚焦 - CSS 优先级不够 → 比如第三方 UI 库的样式用
!important锁死了背景，你的:focus规则得提高权重（加类名、用!important，或确保在它后面加载）
兼容性与移动端注意点
:focus 在所有现代浏览器都支持，但移动端 Safari 和 Android WebView 对“软键盘弹出时是否触发 :focus”行为不一致。关键差异：
- iOS Safari 中，
获得焦点后立即触发:focus，但可能延迟 1–2 帧 - 部分安卓浏览器（尤其旧版 WebView）在点击输入框后，
:focus样式要等键盘完全展开才应用，导致闪一下白底 - 为防闪烁，建议同时设置
:focus-within作用于父容器（如.form-group:focus-within input），提前接管状态
input:focus,
textarea:focus {
background-color: #f0f9ff;
outline: none;
border-color: #2196f3;
}
想让焦点背景更自然？别只改颜色
纯色背景容易显得生硬，尤其和原始输入框反差大时。更稳妥的做法是微调明度或叠加浅色遮罩：
立即学习“前端免费学习笔记（深入）”；
- 用
filter: brightness(1.05)替代换背景色，保留原有渐变/圆角/边框细节 - 对深色主题，改用
background-color: rgba(255,255,255,0.1)而非纯白，避免刺眼 - 若需动画过渡，加
transition: background-color 0.2s ease，但避免在:focus里写transition: all—— 它会把outline、box-shadow全拖进来，造成意外延迟
:focus 失效。 
