将搜索框扩展到左侧

Question

我正在尝试使此可扩展搜索框扩展到左侧，但没有成功。你们能帮我解决这个问题吗？

<div class="search-box d-flex justify-center align-center">
              <input type="text" placeholder="Type to search ..">
             <a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>

这里是CSS：

.search-box:hover > input{
  display: inline-block;
  border-radius: 40px;
  border: 1px solid whitesmoke;
  padding: 0 10px;
  width: 170px;
  padding: 8px;
  outline: none;
  color: whitesmoke;
  box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
}

.search-box:hover{
  transition: width 0.6s ease;
}

谢谢！

Answer 1

我稍微更改了您的代码，但这可能就像您想要的（带有高和宽的红色框仅用于演示，请随时删除该部分;））：]]

.search-box {
  display: flex;
  justify-content: flex-end;
  
  /* for demonstration */
  background-color: red;
  width: 250px;
  height: 150px;
  padding: 10px;
}

.search-box input {
  border-radius: 40px;
  border: 0;
  box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
  padding: 0;
  width: 0;
  height: 15px;
  transition: padding 0.6s ease-in-out,
   width 0.6s ease-in-out;
}

.search-box:hover > input{
  display: inline-block;
  border-radius: 40px;
  width: 170px;
  outline: none;
  color: whitesmoke;
  padding: 8px;
  border: 1px solid whitesmoke;
}
<div class="search-box d-flex justify-center align-center">
              <input type="text" placeholder="Type to search ..">
             <a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>