.input:focus-within 永远不生效，因为 :focus-within 只能作用于父容器（如 div.form-group），而非子元素自身；需为父容器添加 tabindex="-1" 以确保可聚焦上下文，并用 outline 实现高亮，避免 border 或 box-shadow 带来的布局与可访问性问题。
为什么 .input:focus-within 永远不生效
因为 :focus-within 只能写在父容器上，不是子元素的“自身状态”。你在 input 元素上加 .input:focus-within，浏览器直接忽略——它只匹配“能监听后代焦点”的祖先节点。真正要高亮整个输入区域，必须把伪类放在包裹它的 div、label 或 form-item 上。
父容器必须带 tabindex="-1" 才能稳定触发
纯 <div class="form-group"><input></div> 在 Safari 15.4+ 和部分旧版 Chrome 中可能不响应 :focus-within，原因是该 div 缺乏可聚焦上下文。这不是 bug，是规范要求。
-
<div class="form-group" tabindex="-1">✅ 安全可靠：赋予监听能力，但不改变 tab 顺序 -
<div class="form-group">❌ 多数情况下失效，尤其动态插入或嵌套较深时 - 别给整个
<form>加:focus-within——点提交按钮也会触发，容易误高亮
外边框高亮推荐用 outline 而非 border 或 box-shadow
想实现“高亮外边框”效果，outline 是最轻量、无障碍友好的选择：它不占布局空间、不引发重排、键盘用户能清晰识别焦点位置。
- 基础写法：
outline: 2px solid #007bff; - 微调距离避免贴边：
outline-offset: 2px; - 务必配过渡：
transition: outline 0.2s;（写在默认状态里，不是只写在:focus-within中） - 别用
border：改border-color不够明显；改border-width会跳动；且需提前设border: 2px solid transparent预留空间 - 慎用
box-shadow：虽可控，但容易和系统outline叠加出双环，必须同步加outline: none，反而增加可访问性风险
动态插入的 input 容易漏掉的三个检查点
如果表单是 JS 动态渲染的（比如 React/Vue 组件、AJAX 加载），即使 HTML 结构看起来正确，:focus-within 也可能静默失效：
立即学习“前端免费学习笔记（深入）”；
-
input是否被tabindex="-1"或pointer-events: none封锁？DevTools 里点一下，看焦点是否真落在它身上 - 外层是否用了
display: contents或visibility: hidden？这些会切断浏览器对“焦点落点”的判断链 - 是否在 Shadow DOM 内？此时
:focus-within必须写在 shadow host 元素上，且子元素焦点需能穿透出来
真正难调试的不是语法，而是焦点链是否完整——它既依赖 DOM 层级，也受样式和属性干预。每次失效，先打开 DevTools 的 Elements 面板，手动点 input，观察焦点是否真的进入目标节点，再往上查父容器是否具备监听资格。
