输入框获得焦点时样式不生效，需确保元素可聚焦（如加tabindex）、正确使用:focus伪类、避免:focus-visible误用，并注意outline覆盖、移动端兼容性及焦点被抢占问题。
输入框获得焦点时样式不生效？检查 :focus 选择器写法和触发条件
浏览器中只有可聚焦元素（如 <input>、<textarea>、<button>）才能响应 :focus。若对 <div> 或普通文本直接加 div:focus，样式永远不会应用——它默认不可聚焦，除非手动加 tabindex 属性。
-
:focus是动态伪类，只在元素实际获得键盘或鼠标焦点时激活（例如点击输入框、按 Tab 键切换到它） - 避免写成
input:focus-visible误以为是通用写法；:focus-visible是独立伪类，行为更严格（仅键盘触发时生效） - 移动端 Safari 对
:focus支持较弱，常需配合ontouchstart或role="textbox"强制激活
如何让自定义组件支持 :focus 样式？必须满足可聚焦前提
如果封装了一个带 <span> 的“伪输入框”，想让它响应 :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 焦点管理是否干净——样式只是表象，底层焦点归属才是关键。
