:focus-within是最优解，将样式写在父容器上，子元素获焦即触发高亮；需确保容器有边界且子元素可聚焦，现代浏览器支持良好，ie不支持。
搜索框获取焦点后如何让整个容器高亮
直接给 input 加 :focus 只能影响自身，但 UI 上常需高亮外层 div 或 form 容器（比如加边框、背景色、阴影）。用 :focus-within 是目前最干净的方案——它在容器内任意子元素获得焦点时触发，无需 JS。
:focus-within 在搜索框场景中的实际写法
关键点是把样式写在容器上，而不是 input。注意：父容器必须有明确边界（比如设 border 或 padding），否则高亮可能不可见。
.search-container {
padding: 8px;
border-radius: 4px;
transition: border-color 0.2s;
}
.search-container:focus-within {
border: 2px solid #007bff;
background-color: #f8f9fa;
}
- 确保
input没有tabindex="-1"，否则无法触发:focus-within - 如果容器内还有按钮（如清空图标、搜索图标），它们也支持聚焦，同样会激活
:focus-within - 不支持 IE，Edge 79+、Chrome 60+、Firefox 61+ 才可用
为什么不用 JavaScript 监听 focus/blur
JS 方案（如监听 input:focus 然后切换 class）看似灵活，但容易漏掉几种情况：
- 用户用鼠标点击搜索图标触发
input.focus()，但没直接点input本身 - 键盘操作（Tab 进入、Esc 清空后 blur）时事件顺序混乱，class 切换不同步
- SSR 或 hydration 前后状态不一致，出现闪动
- 移动端软键盘弹起/收起时，
blur时机不可靠
而 :focus-within 是浏览器原生行为，响应及时、无竞态、零 JS 成本。
兼容性 fallback 怎么做才不破坏体验
真要支持老浏览器（比如只跑内网 IE11 的系统），别用 JS 模拟 :focus-within 全逻辑——太重且难覆盖所有路径。更务实的做法是：
- 默认样式保持「未聚焦」状态（比如浅灰边框）
- 对现代浏览器用
@supports (selector(:focus-within))单独增强 - 不降级为 JS 控制，而是让老浏览器就显示基础样式，视觉差异可控
例如：
@supports selector(:focus-within) {
.search-container:focus-within {
border-color: #007bff;
}
}
这种渐进增强比强行 polyfill 更稳。真正容易被忽略的是：很多团队在写 :focus-within 时忘了检查容器是否可聚焦（比如没设 tabindex），其实完全不需要——只要子元素可聚焦，父容器就自动满足条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
