:focus-within能直接解决父容器响应子元素焦点的问题，如高亮整个.form-group、显示.clear-btn、多字段共用外层容器激活、验证后自动恢复样式；失效主因是父容器无tabindex="-1"、焦点链被display:contents中断、label与input分离且外层未设tabindex。

哪些表单交互问题能被:focus-within直接解决

它专治「父容器需要响应子元素焦点」这类需求，且无需 JS 就能落地。常见场景不是“能不能做”，而是“有没有写对结构”。

• 点击 label 或 tab 到 input 时，高亮整个 .form-group 区域（背景、边框、阴影）
• 输入框获得焦点时，显示隐藏的 .clear-btn 按钮（.input-wrapper:focus-within .clear-btn { display: block; }）
• 多字段组合（如日期选择器中年/月/日三个 input）共用一个外层容器，任一获焦即激活整体状态
• 表单验证失败后，用户再次聚焦某字段，自动移除错误提示或恢复默认样式（配合 class 切换）

.form-group:focus-within 不生效的三个真实原因

不是伪类写错了，是浏览器压根没算这个表达式——它连“监听资格”都没拿到。

• .form-group 是纯 div，没 tabindex="-1"，也不属于原生可聚焦元素（如 form、button），浏览器不把它纳入焦点流计算范围
• input 被套在 display: contents 的 wrapper 里，DOM 结构上仍是后代，但渲染树中断了焦点归属路径
• label 和 input 是分离结构（label[for="x"] + input#x），但外层没设 tabindex="-1"，点击 label 触发 focus 事件后，焦点链无法反向映射到父容器

为什么不能把 :focus-within 写在 input 上

input:focus-within 永远不会匹配。这不是兼容性问题，是规范定义：伪类要求目标元素必须能“监听”后代，而 input 是叶子节点，没有后代可监听。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• input:focus 控制自身状态（比如改 border-color）
• .form-group:focus-within 才是正确监听者，只要内部 input、textarea、button 或任何带 tabindex 的元素获焦，它就响应
• React/Vue 自定义组件中，若原生 input 被加了 tabindex="-1" 或 pointer-events: none，也会导致监听失效

高亮样式容易引发布局抖动的两个操作

很多“失效”其实是视觉反馈副作用造成的：用户看到跳动、遮挡、错位，下意识以为功能坏了。

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

• 在 :focus-within 规则里改 height、margin、padding 或 display：表格中 tr 高度变化会整行重绘；嵌套容器 padding 变化可能撑开父级，覆盖文字
• 用 box-shadow: inset：阴影往里缩，容易盖住 input 文字或 label，尤其在小字号或紧凑布局中
• 推荐方案：outline: 2px solid #007bff（不占空间、无重排、键盘导航友好），或 box-shadow: 0 0 0 2px rgba(0,123,255,0.25)（非 inset）

真正卡住人的，从来不是语法记不住，而是 DOM 结构松散、样式无意中断焦点链、或者把伪类挂错位置——这些地方一错，浏览器直接跳过计算，连 devtools 的 :focus-within 伪类调试器都亮不起来。