诚然，我可能有点得意忘形，但我相信以下内容可以满足您的需求，因为它会向右扩展并将按钮向右移动。
:root{
--i-trans-fast:350ms;
}
.search{
border-radius: 40px;
height:40px;
background-color:orange;
/*
border: added to better define object boundary
float: set left to facilitate the appearance to the right on mouseover
*/
border:2px solid tomato;
float:left;
}
.search input{
position: relative;
left:20px;
top:8px;
padding:5px;
outline: none;
width:0px;
border-radius: 0px 20px 20px 0px;
border: none;
background: transparent;
/*
text-indent: added to show space between button and placeholder/text
transition: changed to make the appearance smoother
opacity: added to give fade-in
*/
text-indent:1.5rem;
transition:ease-in-out all var(--i-trans-fast);
opacity:0;
}
/*
added: .search input:focus so that the panel does not disappear
*/
.search:hover input,.search input:focus{
width:150px;
opacity:1;
}
/*
added to remove ome extra indent which looks
odd when button has moved to the right
*/
.search input:focus{
text-indent:0.5rem;
}
/*
added: various placeholder settings to make text disappear when text
element has focus.
*/
::-webkit-input-placeholder{
transition:ease-in-out all 250ms;
}
:-moz-placeholder{
transition:ease-in-out all 250ms;
}
::-moz-placeholder {
transition:ease-in-out all 250ms;
}
:-ms-input-placeholder {
transition:ease-in-out all 250ms;
}
:focus::-webkit-input-placeholder{
color:transparent;
}
:focus:-moz-placeholder{
color:transparent;
}
:focus::-moz-placeholder {
color:transparent;
}
:focus:-ms-input-placeholder {
color:transparent;
}
.btn{
height:40px;
width:40px;
border-radius:20px;
background-color:tomato;
transform: translate(0px,-25px);
}
.btn i{
position:relative;
top:2px;
left:7px;
/*
opacity:added to give fade-in
transition: added to make fade-in smooth
*/
opacity:0;
transition:ease-in-out opacity var(--i-trans-fast);
}
/*
added to give fade-in final appearance
*/
.btn:hover i,.search input:hover + div > i{
opacity:1;
}
/*
set content of pseudo element as arrow - initially transparent
*/
.btn i:before{
font-family:arial;
content:'\25BA';
font-size:2rem;
color:red;
}
/*
added to allow smooth movement of search bttn to the right
*/
.search input + div{
transition:ease-in-out all var(--i-trans-fast);
}
/*
Added to move the search button to the right
*/
.search input:focus + div{
transform: translate(123px,-25px) rotateZ(360deg);
}
/*
change opacity of i elememt
*/
.search input:focus + div > i{
opacity:1;
left:10px;
top:2px;
}
/*
change color of and content of i pseudo element
*/
.search input:focus + div > i:before{
color:white;
content:'\003F';
}
<div class='search'>
<input type='text' placeholder='search...' />
<div class='btn'>
<i class='fas fa-search'></i>
</div>
</div>
,
只在下面的css中改变
.search{
border-radius: 40px;
height:40px;
background-color: orange;
float:left;
transform: translate(580px,0px);
}
首先您必须在左侧设置搜索面板，然后您需要将 translate() 设置为 580px 或更多或更少。
,
重新设计了样式并添加了以下行为：
-
输入字段保持打开状态：
-
仅当输入任何文本时，搜索按钮才处于活动状态。
.search {
position: relative;
float: right;
margin-right: 250px;
border-radius: 40px;
overflow: hidden;
background-color: orange;
}
.search input {
height: 40px; width: 0;
padding: 5px 40px 5px 0;
border: none; outline: none;
box-sizing: border-box;
background-color: transparent;
cursor: pointer;
transition: 0.2s;
}
.search input:not(:placeholder-shown),.search input:focus,.search:hover input {
width: 200px;
padding: 5px 40px 5px 1em;
cursor: unset;
}
.btn {
position: absolute;
top: 0; right: 0;
height: 40px; width: 40px;
border-radius: 20px;
background-color: tomato;
cursor: pointer;
pointer-events: none;
}
.search input:not(:placeholder-shown)+.btn {
pointer-events: auto;
}
.btn i {
position: relative;
top: 10px; left: 10px;
}
<div class="search">
<input type="text" placeholder="search...">
<div class=btn>
<i class="fas fa-search">🔍</i>
</div>
</div>
,
我意识到主要问题是使用 float:right，因此在删除它之后，添加 display:inline-flex 以允许搜索 div 与导航栏位于同一行并仅使用 transform:translate(x,y)出于定位目的，它现在可以工作了！ :)
本文链接：https://www.f2er.com/35275.html
