如何利用css的:focus-within在输入时高亮整个表单组

:focus-within生效需父元素可聚焦（如form或tabindex="-1"），否则不触发；高亮错位需统一box-sizing:border-box；鼠标点击不触发需检查focus事件冒泡；safari旧版需js fallback监听focusin。

如何利用css的:focus-within在输入时高亮整个表单组_视觉焦点追踪

:focus-within 触发条件不生效？检查父容器是否可聚焦

:focus-within 只有在父元素**内部任意子元素获得焦点**，且该父元素本身**能参与焦点流（tabindex 可达）或原生可聚焦**时才生效。常见错误是直接套在 div 上却没给它任何聚焦能力。

✅ 正确做法：用语义化标签如 form、fieldset 作为容器（它们天然支持 :focus-within）

✅ 或显式添加 tabindex="-1"（仅需一次，不干扰 tab 顺序）：

<div class="form-group" tabindex="-1">
<li>❌ 错误写法：<code><div class="form-group"><input></div></code> —— 默认 <code>div</code> 不可聚焦，<code>:focus-within</code> 永远不会触发</li>


<h3>输入框获取焦点后，整个组高亮但边框错位？注意 box-sizing 和 border-collapse

</h3>
<p>高亮常通过 <code>border</code> 或 <code>outline</code> 实现，但若表单组内含 <code>label</code>、<code>input</code>、<code>error message</code> 等多层元素，边框渲染可能因盒模型不一致而“跳动”或覆盖内容。</p>

<ul>
<li>务必统一设置 <code>box-sizing: border-box</code> 到所有相关元素（包括父容器），避免 <code>padding</code> + <code>border</code> 导致宽度溢出</li>
<li>避免对 <code>:focus-within</code> 父容器同时使用 <code>outline</code> 和 <code>border</code> —— outline 不占布局空间，容易和 border 重叠或偏移</li>
<li>推荐方案：<pre class="brush:php;toolbar:false;">.form-group:focus-within { border: 2px solid #007bff; }

，再配合 transition: border-color 0.15s 提升响应感

键盘 Tab 进入时高亮正常，但鼠标点击 input 却不触发？检查事件冒泡与 shadow DOM

:focus-within 依赖 focus 事件冒泡。绝大多数情况没问题，但以下场景会中断：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

子元素设置了 onfocus="event.stopPropagation()" 或类似逻辑（极少见，但调试时要排查）
input 被包裹在 Web Component 内部，且 shadow root 使用了 mode: "closed" —— 此时 focus 事件无法穿透到外层容器
某些 UI 库（如早期 Ant Design）对 input 做了封装，实际聚焦的是内部隐藏 input，而外层 wrapper 未同步传递 focus 状态

验证方法：在控制台运行 document.activeElement，点击 input 后看返回值是否为预期的子元素；如果不是，说明焦点被劫持或未正确透出。

需要兼容 Safari 15.4 之前版本？准备降级 fallback

:focus-within 在 Safari 中直到 15.4 才完全稳定（尤其对动态插入的子元素）。如果你的用户仍有较老 macOS/iOS 设备，不能只靠 CSS。

降级策略：用 JavaScript 监听 focusin 和 focusout 事件，在父容器上手动增删类名：
```
formGroup.addEventListener('focusin', () => formGroup.classList.add('focused'));
```
注意用 focusin（冒泡）而非 focus（不冒泡），才能捕获子元素获得焦点的时刻
别忘了处理嵌套表单组：用 event.target.closest('.form-group') 定位最近父容器，避免误标

真正麻烦的不是写法，而是当表单组里混用了 contenteditable 区域、自定义下拉、或第三方富文本编辑器时，它们的焦点行为往往绕过标准流程 —— 那时候 :focus-within 就只是个优雅的摆设，得靠具体组件的 API 去 hook。