为何点击搜索图标时search-bar输入框无法触发宽度展开？

问题根源分析 #

1. CSS选择器失效：你用的~后续同级选择器只能选中当前元素之后的同级元素，但HTML中.search-bar在.search-btn之前，.search-icon:focus ~ .search-bar完全匹配不到目标输入框。
2. 图片无法获取焦点：<img>标签默认不支持:focus状态，点击图标不会触发任何聚焦样式。
3. 定位容器缺失：.search-btn用了absolute定位，但父容器未设置position: relative，导致按钮定位脱离预期位置。

修复代码实现 #

修改后的HTML

<div class="mid-header-div">
  <div class="search-bar-div">
    <button class="search-btn">
      <img class="search-icon" src="../Frst/intermediate/Icon/search.svg" />
    </button>
    <input class="search-bar" type="text" placeholder="搜索" />
  </div>
</div>

• 修正父容器的属性为class="search-bar-div"（原代码写成无值属性，不符合规范）
• 调整按钮与输入框的顺序（可选，用于兼容旧浏览器方案）

修改后的CSS

/* 父容器设置相对定位，作为按钮绝对定位的参考 */
.search-bar-div {
  position: relative;
  display: inline-block;
}

.search-bar {
  width: 40px;
  height: 45px;
  transition: width 0.7s ease; /* 明确过渡宽度属性 */
  padding-right: 40px; /* 预留按钮位置，避免输入内容被遮挡 */
  box-sizing: border-box;
  border: none; /* 根据需求调整边框样式 */
}

.search-icon {
  width: 35px;
  pointer-events: none; /* 点击图标时事件传递给父按钮 */
}

.search-bar:focus {
  width: 200px;
  outline: none;
}

.search-btn {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%); /* 垂直居中按钮 */
  width: 35px;
  height: 35px;
  cursor: pointer;
  padding: 0;
}

/* 方案1：现代浏览器推荐 - 父容器内任意元素聚焦时展开输入框 */
.search-bar-div:focus-within .search-bar {
  width: 200px;
}

/* 方案2：兼容旧浏览器 - 按钮聚焦时触发相邻输入框展开（需按钮在输入框前） */
.search-btn:focus + .search-bar {
  width: 200px;
}

关键修复点说明 #

• :focus-within伪类：无需关心元素顺序，只要父容器内的输入框或按钮被聚焦，就会触发输入框宽度变化，是现代浏览器最简洁的实现方式。
• pointer-events: none：让图标点击事件传递给父按钮，确保点击图标时按钮能获取焦点。
• 定位优化：通过relative父容器+transform垂直居中，让按钮定位更稳定。

内容的提问来源于stack exchange，提问作者TheToy