:focus-within没反应主因是焦点未真实进入input或父容器无渲染盒模型；需检查tabindex、pointer-events、visibility、label绑定、display:contents及Shadow DOM穿透等问题。
直接给表单容器加 .form-group:focus-within 就能高亮，但必须确保内部 <input> 真实获焦，且父容器有可渲染的盒模型——否则样式写了也看不见。
为什么 .form-group:focus-within 没反应？
绝大多数“不生效”都不是兼容性问题，而是 DOM 或 CSS 干扰了浏览器对焦点归属的判断：
-
<input>被套了tabindex="-1"、pointer-events: none或visibility: hidden的 wrapper，焦点进不去 - 父容器是纯
<div> 且没设 <code>padding、border或background-color，样式改了但视觉无变化 -
<label></label>和<input>是分离结构（如<label for="x"></label><input id="x">），点击 label 不会触发 input 聚焦，自然不触发:focus-within - 用了
display: contents包裹子元素，浏览器无法确认焦点落点 - 优先用
outline: 2px solid #007bff：不占空间、无重排、屏幕阅读器友好 - 要用阴影，写成
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)，别加inset，否则往里缩可能盖住文字 - 背景色微调可用
background-color: #f8f9fa，但别写transparent，容易被继承覆盖 - 绝对不要在规则里改
height、margin或display，表格中<tr> 高度变化会导致整行跳动 <h3>React/Vue 里自定义输入框为啥不触发？</h3> <p>封装组件（比如 <code><myinput></myinput>）常因透传不当导致原生<input>失去聚焦能力：立即学习“前端免费学习笔记（深入）”；
- 检查渲染出的
<input>是否被设了tabindex="-1"，或父级加了pointer-events: none - 确保没有用
contenteditable替代原生输入，除非显式加了tabindex="0" - Shadow DOM 内使用时，
:focus-within必须写在 shadow host 上，且子元素焦点需能穿透出来
真正容易被忽略的是：很多团队写了
:focus-within却没验证焦点是否真落在目标<input>上——打开 DevTools 的 Elements 面板，手动点击输入框，看焦点高亮框是不是套在<input>自身，而不是外层<div>。如果不是，说明焦点链从一开始就被拦住了。</div> - 检查渲染出的
怎么写才保证高亮稳定可见？
视觉反馈要清晰，又不能破坏布局或键盘导航：
