input:focus不生效主因是元素未获焦点或样式被覆盖；需确保可聚焦、禁用outline:none误删、用:focus-visible区分操作方式、:focus-within处理嵌套、适配移动端特性。
input:focus 为什么有时不生效
常见现象是加了 :focus 样式，但点击输入框没反应——大概率是元素没获得焦点，或者被其他样式覆盖。浏览器默认只对可聚焦的表单控件（如 <input>、<textarea>、<button>）触发 :focus，且前提是没设置 tabindex="-1" 或 disabled。
- 检查是否误加了
outline: none在全局重置里，它会直接干掉默认焦点轮廓，而你又没补上自定义:focus样式 - 如果用了
contenteditable或自定义组件，原生:focus不会自动生效，得靠 JS 触发focus()并配合:focus-within或类名控制 - 移动端 Safari 对
input[type="number"]的焦点行为有延迟，有时需点两下，建议统一用type="text"+ 输入限制代替
:focus 轮廓颜色和宽度怎么精准控制
别只写 outline: 2px solid #007bff ——这样在高对比度模式或 Windows 高亮设置下可能被系统强制覆盖。真正可靠的做法是分层处理：
- 先用
outline: none清掉默认轮廓（避免双轮廓） - 改用
box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25)模拟轮廓，它不受系统高对比度策略干扰 - 若必须用
outline，加上outline-offset: 2px避免贴边难看清，且确保颜色用透明度可控的rgba()而非纯色 - 注意
outline不参与盒模型计算，box-shadow也不影响布局，这点比border更安全
如何让:focus样式只在键盘导航时出现
鼠标点击不该触发高亮轮廓，这是无障碍规范要求。纯 CSS 方案依赖 :focus-visible，但它在旧版 Safari 和部分安卓 WebView 中不支持。
- 现代写法：
input:focus:not(:focus-visible) { outline: none; }，再单独写input:focus-visible样式 - 兼容方案：监听
keydown事件，检测是否按了Tab或方向键，动态加.focus-keyboard类；同时用mousedown移除该类 - 不要用
:hover:focus模拟，鼠标悬停+点击时会误触发，且无法区分首次聚焦来源 - Chrome 111+ 开始默认启用
:focus-visible自动降级逻辑，但 Safari 16.4 才开始支持，上线前务必真机测试
多个输入框嵌套时:focus失效怎么办
比如 <div class="form-group"><input></div>，想对整个 .form-group 加焦点高亮，但 input:focus 只作用于自身。这时候不能硬套父元素 :focus（它不可聚焦），得换思路。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
tabindex="-1"，再用 JS 在input:focus时调用parentElement.focus()，然后写.form-group:focus input样式 - 更轻量：用
:focus-within，它在任意子元素获得焦点时触发父容器样式，.form-group:focus-within { border-color: #007bff; } -
:focus-within兼容性较好（Chrome 60+/Firefox 52+/Safari 15.4+），但 IE 完全不支持，如需兼容 IE，只能回退到 JS 监听 - 注意
:focus-within会响应子元素内所有可聚焦内容（包括按钮、链接），如果只想响应输入框，得配合属性选择器：.form-group:focus-within input:focus
最常被忽略的是:focus在触摸设备上的行为差异——iOS Safari 默认不给非可点击元素加焦点样式，哪怕加了 tabindex="0"，也得配合 -webkit-appearance: none 和显式 cursor: pointer 才能稳定触发。
