<div class="search-container">
<input class="search-input" type="text" placeholder="请输入关键词">
<span class="search-btn">搜</span>
</div>
.search-container{
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
height: 70px;
gap: 5px;
}
.search-input{
border: none;
background: transparent;
font-size: 18px;
border: 0;
padding: 0;
border-radius: 35px;
width: 0;
transition: all .5s;
}
.search-btn{
font-size: 28px;
color: white;
display: inline-block;
background-color: green;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 35px;
text-align: center;
transition: background-color .8s;
}
.search-btn:hover{
cursor: pointer;
background-color: red;
}
.search-container:hover .search-input{
border: 2px solid #eee;
padding: 15px;
border-radius: 35px;
width: 80%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.