:focus-within在移动端搜索框失效非写法问题，而是safari（15.4前）和部分android chrome对其支持不稳定，软键盘弹出致input短暂失焦、焦点链中断，且需满足tabindex="-1"、同容器包裹、子元素可聚焦三前提；动画须用max-width+opacity替代width，配合role="combobox"与js兜底。

为什么:focus-within在移动端搜索框上大概率失效

不是写法错，而是 Safari（尤其 iOS 15.4 之前）和部分 Android Chrome 对 :focus-within + 宽度动画的支持不稳定；软键盘弹出时 input 常短暂失焦再重获焦，导致伪类快速切换、动画中断或直接不触发。点击放大镜图标后调用 input.focus()，某些版本也不响应。

:focus-within生效的三个硬性前提

缺一不可，否则容器根本不会匹配状态：

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

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

下载

• .search-container 必须是可参与焦点流的上下文：加 tabindex="-1"（不干扰 tab 顺序，但让它能监听）
• <input> 和下拉列表（如 <ul class="suggestions"></ul>）必须包裹在同一个父容器内
• 子元素必须真实可聚焦：避免 display: contents 包裹 input，禁用 pointer-events: none 或 tabindex="-1" 在输入框上

纯 CSS 展开动画必须避开的坑

用 :focus-within 控制展开，但动画实现方式决定成败：

• 别用 width 动画：布局重排易导致 Safari 丢焦点；改用 max-width + overflow: hidden
• 初始 max-width 别设为 0，设为 40px（容纳图标+留白），展开用 max-width: min(320px, 80vw)
• 下拉列表不能用 display: none 切换：会导致键盘方向键无法聚焦补全项；应组合使用 opacity: 0、visibility: hidden、pointer-events: none
• 过渡属性必须显式声明：transition: max-width 0.3s ease-in-out, opacity 0.2s ease；避免 transition: all 覆盖导致意外属性动画

无障碍与兼容性兜底必须做

仅靠 :focus-within 不够，尤其面对老系统或辅助技术：

• 给容器加 role="combobox"、aria-expanded="false"，JS 在 focusin 时同步设为 "true"，focusout 延迟 150ms 后设回 "false"
• 补全列表的 id 必须被 aria-controls 显式引用，例如 aria-controls="search-suggestions"
• IE 完全不支持 :focus-within，Safari 15.4 之前支持弱；需 JS fallback 监听 focusin/focusout 并切换 is-expanded 类
• Chrome 自动填充常干扰样式，autocomplete="new-password" 比 off 更可靠

真正卡住体验的，往往不是“怎么写”，而是“什么时候它不工作”——比如软键盘弹起瞬间的焦点抖动、Tab 进入后又被清空按钮点击打断、或者屏幕阅读器根本读不出展开状态。这些点不提前压住，动画再顺也没用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！