本文讲解如何通过 CSS 选择器正确绑定焦点事件，使搜索图标点击后触发输入框宽度扩展，解决 .search-icon:focus ~ .search-bar 单独使用失效的问题。
本文讲解如何通过 css 选择器正确绑定焦点事件，使搜索图标点击后触发输入框宽度扩展，解决 `.search-icon:focus ~ .search-bar` 单独使用失效的问题。
在构建响应式搜索栏时，一个常见需求是：点击输入框或旁边的搜索图标，均能触发搜索栏“展开”效果（如宽度从紧凑态变为宽态）。但若仅依赖 :focus 伪类配合相邻兄弟选择器（~），往往失效——根本原因在于 <img> 元素默认不可聚焦，无法自然触发光标聚焦状态，因此 .search-icon:focus 永远不会匹配。
✅ 正确解决方案：让图标可聚焦 + 合理组合选择器
首先，需确保 .search-icon（即 <img>）能接收焦点。可通过添加 tabindex="0" 实现：
<button class="search-btn"> <img class="search-icon" src="../Frst/intermediate/Icon/search.svg" tabindex="0" /> </button>
⚠️ 注意：<img> 本身不支持 tabindex，但作为 <button> 的子元素，更推荐将 tabindex="0" 移至 <button> 上，并确保按钮语义化（添加 aria-label="Search"）；不过为简化逻辑，此处直接作用于 <img> 在多数浏览器中亦可生效。
接着，在 CSS 中合并两个触发条件：输入框获得焦点，或图标获得焦点时，同时作用于 .search-bar：
.search-bar:focus,
.search-icon:focus ~ .search-bar {
width: 200px;
outline: none;
cursor: text; /* 输入框内建议用 text 光标 */
}⚠️ 关键细节说明：
- ~ 是通用兄弟选择器，要求 .search-icon 和 .search-bar 位于同一父级下且 .search-icon 在前。但你的 HTML 结构中，<input> 在 <button> 之前，而 .search-icon 在 <button> 内部 —— 这意味着 .search-icon 并非 .search-bar 的兄弟元素，而是其后续兄弟的后代，因此 ~ 选择器在此结构下根本无法生效！
? 重构 HTML 结构（推荐做法）
为使 CSS 逻辑可靠，应调整 DOM 层级，让图标容器与输入框成为同级元素：
<div class="mid-header-div">
<div class="search-bar-div">
<input class="search-bar" type="text" placeholder="Search...">
<button class="search-btn" aria-label="Search">
<img class="search-icon" src="../Frst/intermediate/Icon/search.svg" alt="Search icon">
</button>
</div>
</div>对应 CSS 调整（移除无效的 margin-left: 300px 等干扰样式）：
.search-bar-div {
position: relative;
display: inline-block;
}
.search-bar {
width: 40px;
height: 45px;
padding: 0 12px 0 40px; /* 为图标留出左侧内边距 */
border: 1px solid #ccc;
border-radius: 24px;
transition: width 0.7s ease;
outline: none;
}
.search-bar:focus {
width: 200px;
}
.search-btn {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.search-icon {
width: 20px;
height: 20px;
vertical-align: middle;
}
/* 点击按钮时，也激活输入框焦点（增强体验） */
.search-btn:focus + .search-bar,
.search-btn:hover + .search-bar,
.search-bar:focus {
width: 200px;
}
/* 更健壮的做法：用 JavaScript 主动聚焦（推荐） */
.search-btn:focus, .search-btn:hover {
outline: 2px solid #007bff;
}? 最佳实践建议（进阶）
纯 CSS 方案有局限性；真正健壮的交互应结合 JavaScript：
document.querySelector('.search-btn').addEventListener('click', () => {
document.querySelector('.search-bar').focus();
});这样无论用户点击图标、按钮区域还是输入框，都能统一触发聚焦与展开逻辑，且兼容屏幕阅读器与键盘导航。
✅ 总结
- ❌ 错误：依赖 img:focus ~ input —— img 默认不可聚焦，且结构不满足兄弟关系；
- ✅ 正确：① 保证可聚焦元素（如 button 或加 tabindex）；② 使用合理 DOM 结构；③ 推荐 JS 主动 focus() 实现确定性交互；
- ? 最终目标：一次点击，一致响应，无障碍友好，视觉反馈明确。
