输入框获得焦点时样式不生效，需确保元素可聚焦（如加tabindex）、正确使用:focus伪类、避免:focus-visible误用，并注意outline覆盖、移动端兼容性及焦点被抢占问题。
输入框获得焦点时样式不生效？检查 :focus 选择器写法和触发条件
浏览器中只有可聚焦元素（如 如果封装了一个带 浏览器默认会给聚焦元素加 常见于弹出层、下拉菜单或 Modal 内的输入框：点击后瞬间聚焦，但紧接着父容器或遮罩层执行了 立即学习“前端免费学习笔记（深入）”； 复杂交互中，、、）才能响应 :focus。若对 div:focus，样式永远不会应用——它默认不可聚焦，除非手动加 tabindex 属性。
:focus 是动态伪类，只在元素实际获得键盘或鼠标焦点时激活（例如点击输入框、按 Tab 键切换到它）input:focus-visible 误以为是通用写法；:focus-visible 是独立伪类，行为更严格（仅键盘触发时生效）: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，既可控又保留视觉反馈:focus 中设 outline: none，而忽略 :focus-visible —— 这会让键盘用户完全“看不见”当前焦点
为什么点击后 :focus 样式一闪就消失？可能是事件冒泡或 focus 被抢走
focus()，导致焦点被转移。
.focus()（尤其是 document.body.focus()）autofocus 属性，或在组件挂载后用 setTimeout(() => input.focus(), 0) 延迟聚焦blur 回调里无条件调用 otherEl.focus()，这会打断用户自然操作流:focus 的稳定性取决于 DOM 焦点管理是否干净——样式只是表象，底层焦点归属才是关键。
