如何使搜索框在点击输入框或搜索图标时均触发宽度扩展

本文介绍如何通过 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 组合，兼顾可访问性与维护性。