将搜索框展开到左侧

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>