17370845950

:focus样式不生效的根本原因是元素不可聚焦；需检查是否disabled、tabindex设置不当、CSS禁用交互或样式被覆盖，并注意移动端焦点行为差异。

如果 :focus 样式在 或 上不生效，通常不是 CSS 写错了，而是元素本身无法获得焦点。聚焦失效的核心原因在于：该元素不可聚焦（not focusable）。

检查元素是否默认可聚焦

绝大多数 （如 type="text"、"email"、"password"）和 默认就是可聚焦的，但以下情况会使其失去聚焦能力：

• 设置了 disabled 属性 —— 被禁用的表单控件无法聚焦，也不会触发 :focus
• 设置了 readonly 且未显式设置 tabindex —— readonly 元素仍可聚焦（除非被其他逻辑阻止），但某些旧浏览器或特定样式可能干扰
• 父容器或自身有 tabindex="-1" —— 这会让元素无法通过 Tab 键进入，但可通过 JS .focus() 手动聚焦；若完全不想被聚焦，应避免该值用于输入框
• CSS 中设置了 pointer-events: none 或 visibility: hidden —— 元素不可交互，自然无法获得焦点

确认 tabindex 是否被意外覆盖

tabindex 控制元素能否被键盘聚焦及聚焦顺序。输入框默认 tabindex=0（可聚焦且按 DOM 顺序参与 tab 流）。需排查：

• 是否在 HTML 中写了 tabindex="-1"？这会使它不能通过 Tab 进入，仅支持 JS 聚焦
• 是否在 JS 中动态设置了 el.tabIndex = -1？检查初始化或状态更新逻辑
• 是否全局重置了 tabindex（例如某些 UI 框架或重置样式）？可用浏览器开发者工具检查计算后的 tabIndex 值

验证 :focus 样式是否被更高优先级规则覆盖

即使元素能聚焦，:focus 样式也可能被其他 CSS 覆盖。建议：

• 在开发者工具中选中元素，切换到 :focus 状态，看样式面板里该规则是否被划掉（表示被覆盖）
• 避免使用过于宽泛的选择器（如 input:focus 被 .form-control:focus 覆盖时，后者优先级更高）
• 必要时提高特异性，例如写成 input[type="text"]:focus 或加 !important（仅调试用，不推荐线上滥用）

注意移动端与伪类触发方式差异

在部分 iOS Safari 或 Android WebView 中，:focus 可能不会在点击后立即生效，尤其当：

• 页面启用了 user-scalable=no 或缩放限制，影响焦点行为
• 元素被包裹在 contenteditable="true" 容器内，导致焦点逻辑异常
• 使用了第三方库（如某些日期选择器、富文本编辑器）接管了原生焦点事件
• 尝试用鼠标点击却无反应？请确认是否在触摸设备上测试——点击即聚焦，无需额外操作

确保可聚焦是前提，再谈样式生效。先移除 disabled、检查 tabindex、验证交互状态，最后再调样式。不复杂但容易忽略。