:focus-within能替代JS控制下拉显隐，因其原生监听容器及子元素焦点状态，避免手动处理focus/blur、防抖和外部点击隐藏；需配合opacity/visibility/pointer-events隐藏、role="combobox"与aria属性保障可访问性，并注意浏览器兼容性与autofill干扰。
focus-within 为什么能替代 JS 控制下拉显隐
因为 :focus-within 是原生 CSS 伪类，只要元素自身或其任意子元素获得焦点，它就生效。搜索框 + 下拉列表封装在一个容器里时，用户点击输入框、按 Tab 进入、甚至用键盘操作下拉项，整个容器都保持 :focus-within 状态——不用监听 focus/blur、不用防抖、不用处理 mousedown 外部点击隐藏逻辑。
常见错误现象：display: none 的下拉区在 :focus-within 下直接切 display: block，结果键盘导航（如方向键选中）失效——因为 display: none 元素完全不可聚焦、不参与 tab 顺序。
- 正确做法：用
opacity: 0; visibility: hidden; pointer-events: none;隐藏，:focus-within触发时改opacity: 1; visibility: visible; pointer-events: auto; - 必须把
<input>和补全列表（如<ul class="suggestions"></ul>）包在同一个父容器里，否则伪类不生效 - IE 完全不支持
:focus-within，Edge 79+ 才支持；如需兼容旧版，得 fallback 到 JS
autocomplete="off" 和 role="combobox" 怎么配合 focus-within 使用
浏览器原生自动填充（autofill）会覆盖自定义补全样式，尤其在 Chrome 中常导致下拉错位或闪烁。autocomplete="off" 并不能彻底禁用，但设为 autocomplete="new-password" 或带时间戳的随机值（如 autocomplete="search-1712345678"）更可靠。
而 role="combobox" 是可访问性刚需：它告诉屏幕阅读器“这是个可输入 + 可展开列表的组合控件”，配合 aria-expanded 和 aria-controls 才能让键盘用户感知状态变化。
立即学习“前端免费学习笔记（深入）”；
- 给容器加
role="combobox" aria-expanded="false"，:focus-within激活时用 JS 同步更新aria-expanded="true" -
aria-controls必须指向补全列表的id，例如aria-controls="search-suggestions" - 别只靠 CSS 显隐，
aria-expanded值必须真实反映当前是否可见，否则辅助技术会误判
下拉列表滚动和键盘导航的 CSS 边界处理
当补全项超过 5 条，列表需要固定高度 + overflow-y: auto，但直接加会导致 :focus-within 失效范围被截断——焦点落在滚动条或列表内部时，父容器可能已失焦。
根本原因：滚动容器本身不是可聚焦元素，且子项若没设 tabindex="0"，键盘无法进入。
- 补全项（
<li>或<div role="option">）必须带 <code>tabindex="0"，首次展开后 JS 聚焦第一个选项 - 滚动容器（如
<ul class="suggestions"></ul>）加outline: none，避免聚焦时出现双轮廓 - 用
max-height替代height，配合transition: max-height 0.2s ease实现平滑展开收缩（注意：max-height动画需设合理初始值，如max-height: 0→max-height: 200px） - 临时解法：在 input 上强制加
focus-visible兜底，如input:focus, input:focus-visible { outline: none; } - 更稳妥的是在容器上同时监听
:focus-within和:has(:focus)（如果浏览器支持:has），但目前 Safari 16.4+、Chrome 105+ 支持，Firefox 尚未支持 - 真正容易被忽略的点：不要依赖
:focus单独控制下拉显隐，它和:focus-within在不同交互路径下行为不一致
Chrome 117+ 的 :focus-visible 兼容问题怎么绕过
新版 Chrome 对 :focus 触发时机更严格，比如鼠标点击后默认不触发 :focus 样式（只触发 :focus-visible），导致 :focus-within 包裹的容器在鼠标操作时“看似没激活”，下拉不显示。
这不是 bug，是浏览器在推行“仅对键盘焦点显示 outline”，但会意外影响 :focus-within 的判断依据。
