:focus-within生效需父容器可聚焦，应加tabindex="-1"或使用原生可聚焦元素；子元素须真正获焦，避免display:contents等阻断；高亮推荐outline或box-shadow，禁用影响布局的属性。

直接写在父容器上，且该容器必须能参与焦点流——否则样式永远不会生效。

为什么:focus-within写在

上却没反应

纯 <div> 默认不可聚焦，<code>:focus-within 无法触发。浏览器只会在“可聚焦上下文”中检测后代焦点，而原生 <div> 不属于该上下文。 <ul> <li>✅ 正确做法：给父容器加 <code>tabindex="-1"（仅需一次，不干扰 tab 顺序）

❌ 错误写法：<div class="form-group"><input></div> + .form-group:focus-within，但没设 tabindex

⚠️ 注意：<form></form>、<fieldset></fieldset>、<label></label> 等原生可聚焦元素可直接用，无需额外加 tabindex

怎么确保子元素真能获得焦点

即使父容器加了 tabindex="-1"，如果子 <input> 被阻断，:focus-within 仍不会匹配。

• 检查 <input> 是否被套了 display: contents 或 visibility: hidden 的 wrapper —— 这些会让浏览器无法确认焦点落点
• 确认没有意外设置 tabindex="-1" 或 pointer-events: none 在中间层 <div> 上 <li>在 DevTools 中点击输入框后，看 <code>:focus 是否真正落在 <input> 上（而非外层容器）
• React/Vue 自定义组件要透传 tabIndex，并确保渲染出的原生 <input> 没被拦截

高亮样式别改布局，优先用 outline 或 box-shadow

在 :focus-within 规则里修改 height、margin 或 display 容易引发重排，尤其在表格或嵌套结构中会跳动或错位。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• ✅ 推荐：outline: 2px solid #007bff —— 不占空间、无重排、键盘导航友好
• ✅ 替代方案：box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) —— 避免用 inset，否则会往里缩盖住文字
• ❌ 避免：border: 2px solid #007bff 单独使用 —— 若原 border 是 1px，宽度变化会撑开容器；统一设 box-sizing: border-box 可缓解但不根治
• ⚠️ 别同时用 outline 和 border，视觉上容易糊成一团

别在

上直接用:focus-within

<form></form> 内所有可聚焦元素（包括按钮、链接、<input>）都会触发它，导致点“提交”按钮时整个表单高亮，干扰用户判断当前操作焦点。

• ✅ 更稳妥：把 :focus-within 应用到每个 .form-group 或 .input-wrapper 级别
• ✅ 若需全局响应，可用 JS 监听 focusin 事件再加 class，:focus-within 不适合这种宽泛监听
• ⚠️ 注意兼容性：IE 不支持，Edge 79+、Chrome 60+、Firefox 61+ 可用 —— 若需兼容旧版，得 fallback 到 JS 方案

最容易被忽略的是：父容器是否真的构成了“可聚焦上下文”，而不是单纯套个 class 就完事。很多翻车都发生在 DOM 结构看似合理、但某一层 display: contents 或 tabindex="-1" 悄悄截断了焦点链。调试时先确认焦点是否真落到目标 <input> 上，再往上查容器是否具备聚焦能力。