如何为CSS展开式搜索栏添加右侧关闭（X）图标？

1. 调整HTML结构 #

把X图标放在输入框之后、搜索图标之前（确保在同一个父容器内），示例结构如下：

<label class="search">
  <input type="text" placeholder="输入搜索内容..." />
  <!-- 用span实现X图标，也可替换为img标签 -->
  <span class="clear-icon">×</span>
  <span class="search-icon">🔍</span>
</label>

2. CSS控制显示与位置 #

通过CSS实现默认隐藏X图标，仅在搜索栏展开（输入框获焦）时显示，同时调整图标位置到输入框右侧：

/* 父容器设为相对定位，作为子元素绝对定位的基准 */
.search {
  position: relative;
  /* 保留原搜索栏的其他样式 */
}

/* X图标基础样式 */
.clear-icon {
  position: absolute;
  right: 32px; /* 距离右侧的距离，根据搜索图标宽度调整 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  cursor: pointer;
  color: #666;
  /* 默认隐藏图标 */
  display: none;
}

/* 输入框聚焦时显示X图标 */
.search input:focus + .clear-icon {
  display: block;
}

/* 可选优化：输入框有内容时也显示X图标 */
.search input:not(:placeholder-shown) + .clear-icon {
  display: block;
}

3. 添加清空输入框交互（可选） #

若需要点击X图标清空输入框，添加以下JS代码：

document.querySelector('.clear-icon').addEventListener('click', function() {
  const input = this.previousElementSibling;
  input.value = '';
  // 可选：清空后保持输入框聚焦状态
  input.focus();
});

问题原因分析 #

你之前的问题核心两点：

• 未给X图标设置默认隐藏样式，导致它始终显示
• 未关联输入框聚焦状态控制图标显示，且未通过定位调整位置，导致图标出现在错误区域

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