: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”行为不一致。关键差异：
