如何利用CSS :focus-within伪类实现表单高亮特效

:focus-within必须写在父容器上才生效，因其专为“监听者”设计，用于让父级感知后代焦点；加在input等子元素自身则永不触发，因叶子节点无法监听自身，且父容器需具备可聚焦上下文（如tabindex="-1"）才能正确计算该伪类。

:focus-within 必须写在父容器上才生效，加在 input 自身上永远不触发。

为什么 :focus-within 加在 input 上没反应

它不是 :focus 的替代品，而是专为“监听者”设计的伪类——只响应自身或其任意后代获得焦点的元素。把 :focus-within 写在 input 上，等于让一个叶子节点监听自己，浏览器直接忽略。

• input:focus 负责改输入框自身样式（边框、阴影等）
• .form-group:focus-within 才能让整个包裹区域响应：只要内部 input、textarea、button 或带 tabindex 的元素获焦，就立刻激活
• 常见错误写法：.input:focus-within { ... } —— 永远不匹配

父容器必须能参与焦点流，否则伪类无效

纯 <div> 默认不可聚焦，但 :focus-within 并不要求它“被 tab 进去”，只要它处于可聚焦上下文中即可。

• ✅ 推荐：<div class="form-group" tabindex="-1"> —— 仅需一次，不干扰 tab 顺序
• ❌ 错误：<div class="form-group"> —— 没有聚焦能力，伪类永不计算
• 别给整个 <form> 加 :focus-within，点任意按钮也会触发，容易误高亮
• <label> 和 <input> 必须构成祖先-后代关系（<label><input></label> 或 <label for="x"></label><input id="x">），否则点击 label 不会触发

哪些结构会让 :focus-within 失效

失效几乎都源于焦点链断裂或渲染上下文缺失，不是 CSS 写错了，而是 DOM 或样式阻断了浏览器对“焦点落点”的判断。

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

• display: contents 或 visibility: hidden 包裹子元素，会导致浏览器无法确认焦点归属
• 自定义组件（如 <MyInput>）中，原生 input 被设了 tabindex="-1" 或 pointer-events: none
• 父容器是纯文本节点，或没盒模型（没 padding、border、display），样式改了也看不见
• 在 Shadow DOM 中使用时，:focus-within 必须写在 shadow host 上，且子元素焦点需能穿透出来

高亮样式怎么写才不翻车

视觉反馈要明显，但不能引发重排、跳动或覆盖内容。很多“失效”其实是样式副作用导致的。

• 绝对别在 :focus-within 规则里改 height、margin 或 display —— 表格中 <tr> 高度变化会整行跳动
• 优先用 outline: 2px solid #007bff：不占空间、无重排、键盘导航友好
• 要用阴影，选 box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加 inset，否则往里缩盖住文字
• 统一所有相关元素的 box-sizing: border-box，避免 border + padding 导致宽度溢出
• 高亮色对比度必须 ≥ 4.5:1，否则屏幕阅读器用户无法感知状态变化

真正麻烦的不是写一行 :focus-within，而是确保焦点能落到预期的原生 input 上——打开 DevTools，手动点击，看焦点是否真在那个元素上，而不是外层容器或空白处。