html - 将搜索框扩展到左侧
问题描述
我试图让这个可扩展的搜索框扩展到左侧,但没有成功。你们能帮我解决这个问题吗?
<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;
}
谢谢!
解决方案
我稍微更改了您的代码,但这可能就像您想要的那样(带有高度和宽度的红色框仅用于演示,请随意删除该部分;)):
.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>
推荐阅读
- javascript - 如何从反应组件访问数组中的数组?
- sql - 优化查询以在 Facebook 中查找共同好友
- python - 如何运行超过 10 万个任务的 Airflow dag?
- terraform - Terraform 如何在 template_file 中插入地图类型?
- swift - 当我在 iOS swift 中运行我的应用程序时,我的图表没有加载
- node.js - Namecheap:Node JS Express App - App Route return 404 not found
- javascript - 为什么 bootstrap-multiselect 会关闭下拉菜单?
- android - 为什么在子类化时将参数传递给 FragmentStateAdapter?
- python - 如何使用 asyncio.gather 同时重复/执行协程?
- c - 当我运行我的代码两次(在 While/DoWhile 之后)时,scanf 无法按预期工作。(我使用 Visual C++ Windows 控制台应用程序)