:focus样式不生效的根本原因是元素不可聚焦；需检查是否disabled、tabindex设置不当、CSS禁用交互或样式被覆盖，并注意移动端焦点行为差异。
如果 :focus 样式在 或 上不生效，通常不是 CSS 写错了，而是元素本身无法获得焦点。聚焦失效的核心原因在于：该元素不可聚焦（not focusable）。
绝大多数 （如 type="text"、"email"、"password"）和 默认就是可聚焦的，但以下情况会使其失去聚焦能力：
disabled 属性 —— 被禁用的表单控件无法聚焦，也不会触发 :focus
readonly 且未显式设置 tabindex —— readonly 元素仍可聚焦（除非被其他逻辑阻止），但某些旧浏览器或特定样式可能干扰tabindex="-1" —— 这会让元素无法通过 Tab 键进入，但可通过 JS .focus() 手动聚焦；若完全不想被聚焦，应避免该值用于输入框pointer-events: none 或 visibility: hidden —— 元素不可交互，自然无法获得焦点tabindex 控制元素能否被键盘聚焦及聚焦顺序。输入框默认 tabindex=0（可聚焦且按 DOM 顺序参与 tab 流）。需排查：
tabindex="-1"？这会使它不能通过 Tab 进入，仅支持 JS 聚焦el.tabIndex = -1？检查初始化或状态更新逻辑tabindex（例如某些 UI 框架或重置样式）？可用浏览器开发者工具检查计算后的 tabIndex 值即使元素能聚焦，: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、验证交互状态，最后再调样式。不复杂但容易忽略。