如何用纯CSS实现点击触发的搜索框从Div中心向两侧过渡展开

嘿，我明白你想要的效果——点击搜索图标后，搜索框从中心向两边平滑展开，而且完全不用JS对吧？我之前也遇到过类似的需求，纯CSS就能搞定，给你一套完整的方案：

核心思路 #

不用JS的话，我们可以用隐藏的checkbox作为点击触发器，配合CSS兄弟选择器来控制搜索框的展开状态。关键是把搜索框的变换原点设为中心，用scaleX()从0过渡到1，这样就能实现从中心向两边展开的效果，而不是单侧拉伸。

完整代码示例 #

HTML结构

<div class="search-container">
  <!-- 隐藏的checkbox作为触发器 -->
  <input type="checkbox" id="search-toggle" class="search-toggle">
  <!-- 搜索图标标签，点击时触发checkbox -->
  <label for="search-toggle" class="search-label">
    <!-- 这里可以替换成Font Awesome图标或者自定义图标 -->
    🔍
  </label>
  <!-- 搜索框容器 -->
  <div class="search-form">
    <input type="text" placeholder="搜索..." class="search-input">
  </div>
</div>

CSS样式

/* 基础布局：让容器居中，方便展示 */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem;
}

/* 隐藏checkbox，只保留点击触发功能 */
.search-toggle {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 搜索图标样式，确保点击区域足够大 */
.search-label {
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2; /* 确保图标始终在搜索框上方 */
  padding: 0.3rem;
}

/* 搜索框容器默认状态：收缩不可见 */
.search-form {
  position: absolute;
  width: 0;
  transform: scaleX(0);
  transform-origin: center; /* 关键：设置变换原点为中心 */
  transition: transform 0.3s ease, width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索输入框样式 */
.search-input {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 2rem;
  outline: none;
  width: 220px; /* 搜索框展开后的最终宽度 */
}

/* 点击checkbox后，触发搜索框展开 */
.search-toggle:checked ~ .search-form {
  transform: scaleX(1);
  width: 220px; /* 和输入框宽度保持一致 */
}

关键细节解释 #

1. 无JS触发逻辑：用<label>绑定隐藏的checkbox，点击图标就相当于勾选checkbox，这是纯CSS实现交互的经典技巧，完全不需要依赖JS/jQuery。
2. 中心展开的核心：transform-origin: center让缩放动画从元素中心向两侧扩散，而不是默认的左上角，这正是你要的双向展开效果。
3. 平滑过渡：同时给transform和width添加过渡动画，保证展开过程自然流畅，不会出现突兀的拉伸。
4. 层级控制：给搜索图标设置z-index:2，避免展开时搜索框把图标盖住，保证交互的连贯性。

为什么你之前的方案没成功？ #

你之前用jQuery添加类的方式，大概率是没设置正确的transform-origin，或者只用了width从0到100%的过渡——这种默认是从左向右单侧展开。而用scaleX(0)配合中心原点，就能完美解决双向展开的问题。

如果需要调整展开速度、搜索框宽度或者样式，直接修改CSS参数就行，完全不用碰JS~

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