:focus没反应最常见原因是CSS优先级被覆盖或元素未获焦点；需检查可聚焦性、伪类顺序、UI库替代方案、移动端兼容性，并优先用:focus-within或focusin事件替代。
为什么
在输入框上完全没反应
最常见原因是 CSS 优先级被覆盖，或者元素根本没获得焦点。比如父容器加了
，或输入框被设为
/
（后者虽可聚焦但部分
浏览器
不触发
）。另外，用 JavaScript 调用
后若未等渲染完成就检查样式，也可能误判失效。
不生效时该检查哪些地方
逐项排查比重写样式更高效：
确认元素是可聚焦的：不是
、
，且没有
以外的禁用 tabindex
检查是否被更高优先级规则覆盖——打开 DevTools，看 computed 样式里
对应的声明是否被划掉；常见干扰源是重置库（如 normalize.
css
）或框架默认样式
注意伪类顺序：
必须写在
之后，否则 hover 样式会盖住 focus 效果（即
写法不保险，应分开声明并保证 focus 在后）
某些 UI 库（如 Ant Design）会用
等属性代替原生伪类，此时需改用
属性选择器
移动端和 Safari 的
特别行为
iOS Safari 默认不给非表单元素（如
）触发
，且键盘弹出后焦点可能丢失。Android Chrome 则对
的 focus 样式支持不稳定。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
强制触发：给输入框加
或
（慎用）有助于稳定聚焦
兼容方案：监听
事件，动态加 class（如
），再用 CSS 控制样式，比纯伪类可靠
避免依赖
做关键交互反馈——比如错误提示仅靠 focus 显隐，用户用鼠标点击可能不触发，应结合
或 JS 监听
用
替代
的实际价值
当输入框嵌套在标签、卡片或自定义组件内时，
能让整个容器响应聚焦状态，比层层写
更简洁，且天然支持子元素聚焦穿透。
注意：IE 完全不支持，Edge 16+ 才开始支持，如需兼容旧版，仍得回退到 JS 方案。另外，它不会响应 programmatic focus（如
）在部分老版本 Safari 中的表现，这点容易被忽略。
:focuspointer-events: nonedisabledreadonly:focusfocus():focusdisplay: nonevisibility: hiddentabindex="-1":focus:focus:hoverinput:hover, input:focusdata-focused:focusdiv[contenteditable]:focusinput[type="number"]inputmode="text"autofocusfocusin.is-focused:focus:focus-within:focus-within:focus:focus-withinlabel input:focus.form-group:focus-within {
border-color: #007bff;
}
.form-group input {
outline: none;
}el.focus()