:focus在输入框无反应最常见原因是被高优先级样式（如outline:none）覆盖，或选择器不匹配、元素不可聚焦（disabled/hidden等），需检查计算样式、聚焦状态强制触发及提供可访问的视觉反馈。
为什么 :focus 在输入框上完全没反应
最常见原因是被更高优先级的样式覆盖，尤其是浏览器默认样式或第三方 UI 库（如 Bootstrap、Element Plus）重置了 outline。Chrome/Firefox 默认会给 input:focus 加一个蓝色外边框（outline），但很多 CSS 重置会直接写 outline: none，且没补上替代的视觉反馈，导致“看起来没变化”。
- 检查开发者工具里该元素的 computed 样式，看
outline是否为none，且是否被!important锁死 - 确认选择器权重：比如写了
.form-input:focus，但实际 DOM 是<input class="input">，类名不匹配就无效 - 某些框架（如 Vue 的
v-model绑定后）不会影响 :focus，但若用了contenteditable或自定义控件（非原生input），:focus 就不适用
input:focus 样式写对了却仍不生效的典型场景
不是所有 input 类型都支持标准聚焦行为。例如 type="hidden"、type="file"（其按钮可聚焦，但文件路径框不可直接聚焦）、或被 disabled / readonly 属性禁用的输入框，:focus 伪类都不会触发。
-
type="number"在 Safari 中可能因 spinner 按钮抢占焦点，导致输入区域本身难触发:focus - 使用了
tabindex="-1"会禁止键盘聚焦，仅允许脚本调用.focus()，此时用户点击不会激活:focus - 父容器设置了
pointer-events: none，子元素无法接收鼠标事件，自然也无法获得焦点
如何安全地让 :focus 样式可见且可访问
别只依赖 outline，改用 border、box-shadow 或背景色变化，并确保满足 WCAG 聚焦可见性要求（对比度 ≥ 3:1，尺寸足够）。
input:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);
outline: none; /* 移除默认 outline 后必须提供等效视觉反馈 */
}- 避免仅靠颜色变化：色弱用户可能看不出
border-color差异，建议叠加box-shadow或transform: scale(1.02) - 移动端需额外处理：
:focus在 iOS Safari 中有时延迟或不触发，可加input:focus { outline: 1px solid transparent; }强制重绘 - 如果用了 CSS-in-JS（如 styled-components），确保伪类写法正确：
&:focus而非:focus单独写在模板外
调试时容易忽略的细节
聚焦状态是瞬时的，开发者工具的 “:hover” 检查器对 :focus 无效——必须手动勾选 “Focus” 状态，或在 Elements 面板中右键元素 → “Force element state” → 勾选 :focus。
立即学习“前端免费学习笔记（深入）”；
- 某些 CSS 预处理器（如 Sass）嵌套时，
&:focus必须紧贴选择器，写成input { &:focus { ... } }，不能换行或空格错位 - 如果样式表通过
media查询加载，确认当前视口宽度下该 CSS 文件确实被引入并解析 - Vite / Webpack 的 HMR（热更新）偶尔会漏掉伪类变更，保存后强制刷新页面再试
