或普通文本直接加 div:focus，样式永远不会应用——它默认不可聚焦，除非手动加 tabindex 属性。

• :focus 是动态伪类，只在元素实际获得键盘或鼠标焦点时激活（例如点击输入框、按 Tab 键切换到它）
• 避免写成 input:focus-visible 误以为是通用写法；:focus-visible 是独立伪类，行为更严格（仅键盘触发时生效）
• 移动端 Safari 对 :focus 支持较弱，常需配合 ontouchstart 或 role="textbox" 强制激活

如何让自定义组件支持 :focus 样式？必须满足可聚焦前提

如果封装了一个带 的“伪输入框”，想让它响应 :focus，光写 CSS 不够。得让它真正进入焦点流：

• 添加 tabindex="0" 使元素可被 Tab 键选中
• 用 element.focus() 主动获取焦点（例如点击时）
• 监听 click 或 touchstart 并调用 .focus()，否则触摸屏可能不触发 :focus

/* 示例：让 span 表现得像输入框 */
.custom-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.custom-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

:focus 样式被 outline 覆盖？优先重置 outline 或改用 box-shadow

浏览器默认会给聚焦元素加 outline（通常是虚线框），它会叠加在你的边框上，导致视觉混乱。直接设 outline: none 有可访问性风险——键盘用户将失去焦点指示。

• 推荐用 box-shadow 替代 outline，既可控又保留视觉反馈
• 若必须移除 outline，请同时提供其他焦点标识，比如背景色变化或 border 加粗
• 不要只在 :focus 中设 outline: none，而忽略 :focus-visible —— 这会让键盘用户完全“看不见”当前焦点

为什么点击后 :focus 样式一闪就消失？可能是事件冒泡或 focus 被抢走

常见于弹出层、下拉菜单或 Modal 内的输入框：点击后瞬间聚焦，但紧接着父容器或遮罩层执行了 focus()，导致焦点被转移。

立即学习“前端免费学习笔记（深入）”；

• 检查是否有 JS 在点击后调用了其他元素的 .focus()（尤其是 document.body.focus()）
• 给输入框加 autofocus 属性，或在组件挂载后用 setTimeout(() => input.focus(), 0) 延迟聚焦
• 避免在 blur 回调里无条件调用 otherEl.focus()，这会打断用户自然操作流

复杂交互中，:focus 的稳定性取决于 DOM 焦点管理是否干净——样式只是表象，底层焦点归属才是关键。

https://www.php.cn/faq/2011986.html