如何让搜索框在点击输入框或搜索图标时均触发宽度扩展-html教程-PHP中文网

本文介绍如何通过 CSS 选择器联动实现：当用户点击输入框（）或其右侧的搜索图标（）时，统一触发搜索栏宽度从 40px 扩展至 200px，解决因 DOM 结构导致的焦点丢失问题。

本文介绍如何通过 css 选择器联动实现：当用户点击输入框（``）或其右侧的搜索图标（``）时，统一触发搜索栏宽度从 40px 扩展至 200px，解决因 dom 结构导致的焦点丢失问题。

在实际开发中，常将搜索图标作为按钮元素置于输入框右侧，形成视觉一体化的搜索组件。但 HTML 中图标位于之后（且不在同一父容器内直接包裹），导致 :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 中在前、
✅ 正确解法是调整 HTML 结构，使图标容器位于输入框之前，并共用同一父容器（如
），或改用 JavaScript 统一控制焦点逻辑。
推荐修复后的结构示例：

Humanizer
一款AI工具，主要用于去除文本中人工智能生成写作的痕迹。在编辑或审阅文本时使用，以使其读起来更自然、更像人类撰写的内容。基于 Wikipedia 的全面……，适合需要提升相关任务效率的用户。

下载
```
<div class="search-wrapper">
  <input class="search-bar" type="text" placeholder="Search..."><button class="search-btn" type="button">
    @@##@@
  </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 ~，避免依赖兄弟顺序；
- 为
- 对 .search-bar 设置 padding 和 border-radius，确保宽度变化时视觉平滑；
- 若需 IE 兼容，则必须采用 JavaScript 监听点击事件并手动添加/移除 active 类。
总结：纯 CSS 实现“点图标也扩展”的核心在于结构合理性与选择器精准性。优先采用语义清晰、结构可控的 HTML + :focus-within 组合，兼顾可访问性与维护性。