本文介绍如何通过 CSS 选择器联动实现：当用户点击输入框（<input>）或其右侧的搜索图标（<img>）时，统一触发搜索栏宽度从 40px 扩展至 200px，解决因 DOM 结构导致的焦点丢失问题。
本文介绍如何通过 css 选择器联动实现：当用户点击输入框（``）或其右侧的搜索图标（``）时，统一触发搜索栏宽度从 40px 扩展至 200px，解决因 dom 结构导致的焦点丢失问题。
在实际开发中，常将搜索图标作为按钮元素置于输入框右侧，形成视觉一体化的搜索组件。但 HTML 中 <img> 图标位于 <input> 之后（且不在同一父容器内直接包裹），导致 :focus 伪类无法自然作用于输入框——因为点击图标时，焦点并未落在 .search-bar 上，而是落在 .search-icon 上，此时仅靠 .search-bar:focus 规则无法响应。
要实现“点哪都扩展”，需利用 CSS 的 相邻兄弟选择器（~） 和 多选择器组合，将两种焦点状态统一映射到 .search-bar 的样式变更上：
.search-bar:focus,
.search-icon:focus ~ .search-bar {
width: 200px;
outline: none;
cursor: text; /* 建议设为 text 而非 pointer，更符合输入行为 */
}⚠️ 注意事项：
- ~ 是通用兄弟选择器，要求 .search-icon 与 .search-bar 处于同一父级容器下且 .search-icon 在 .search-bar 之前；但你的原始 HTML 中 <input> 在前、<button>（含 .search-icon）在后，因此 ~ 实际无法匹配（.search-icon:focus ~ .search-bar 表示「聚焦图标后方的 .search-bar」，而 .search-bar 在其前方）。
- ✅ 正确解法是调整 HTML 结构，使图标容器位于输入框之前，并共用同一父容器（如 <div class="search-wrapper">），或改用 JavaScript 统一控制焦点逻辑。
推荐修复后的结构示例：
<div class="search-wrapper">
<input class="search-bar" type="text" placeholder="Search...">
<button class="search-btn" type="button">
<img class="search-icon" src="../Frst/intermediate/Icon/search.svg" alt="Search">
</button>
</div>对应修正后的 CSS（关键：.search-btn:focus-within ~ .search-bar 或更稳妥的 JS 方案）：
.search-wrapper {
position: relative;
display: inline-block;
}
.search-bar {
width: 40px;
height: 45px;
padding: 0 12px;
border: 1px solid #ccc;
border-radius: 20px;
transition: width 0.3s ease, padding 0.3s ease;
}
.search-bar:focus {
width: 200px;
padding: 0 16px;
outline: none;
}
/* 利用 focus-within 捕获按钮内子元素聚焦 */
.search-btn:focus-within + .search-bar,
.search-bar:focus {
width: 200px;
padding: 0 16px;
}✅ 最佳实践建议：
- 使用 :focus-within（兼容性良好，支持现代浏览器）替代 :focus ~，避免依赖兄弟顺序；
- 为 <button> 添加 type="button" 防止表单意外提交；
- 对 .search-bar 设置 padding 和 border-radius，确保宽度变化时视觉平滑；
- 若需 IE 兼容，则必须采用 JavaScript 监听点击事件并手动添加/移除 active 类。
总结：纯 CSS 实现“点图标也扩展”的核心在于结构合理性与选择器精准性。优先采用语义清晰、结构可控的 HTML + :focus-within 组合，兼顾可访问性与维护性。
