如何实现搜索框向左扩展？CSS布局问题求助

要实现搜索框聚焦时向左扩展而非向右，核心是固定元素的右边缘位置，让宽度增加时自然向左延伸。以下是修改后的代码及说明：

修改后的CSS #

/* 给父容器（如body）添加相对定位，作为搜索框绝对定位的参照 */
body {
  position: relative;
}

.search-click {
  border: 1px solid #ccc;
  outline: none;
  background-size: 22px;
  background-position: 13px;
  border-radius: 100px;
  width: 363px;
  height: 40px;
  padding: 21px;
  transition: all 0.5s;
  margin-top: 54px;
  text-overflow: ellipsis;
  position: absolute; /* 改为绝对定位 */
  right: 0; /* 固定右边缘位置 */
  overflow: hidden;
}

.search-click:focus {
  width: 800px;
  padding-left: 20px;
}

修改说明 #

1. 调整定位逻辑：将搜索框的position从relative改为absolute，并设置right: 0固定右边缘。此时宽度增加时，元素会向左扩展，而非默认的向右延伸。
2. 移除无效样式：原CSS中的.search-click input选择器无效（.search-click本身就是input元素，无嵌套子input），直接删除该部分代码。
3. 设置参照基准：给父容器（如body）添加position: relative，确保搜索框的绝对定位有正确的参照范围。

可选方案：中心向两侧扩展 #

若希望搜索框以自身中心为基准向两侧扩展（含向左延伸），可使用transform实现，无需修改父容器定位：

.search-click {
  /* 保留原有样式，position保持relative */
  position: relative;
}

.search-click:focus {
  width: 800px;
  padding-left: 20px;
  /* 向左移动宽度增量的一半，实现对称扩展 */
  transform: translateX(calc(-(800px - 363px)/2));
}

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