我的想法是,當用戶單擊或將光標置於搜索欄中時,將位於頁面中心的搜索欄的位置更改爲右上角在中心部分製作區域顯示搜索結果。單擊時更改搜索欄的位置
此外,在轉換過程中光標應該保留在搜索欄中。
這是我的HTML和CSS的搜索欄
.search-container{
position: absolute;
width: 630px;
height: 100px;
z-index: 15;
top: 50%;
left: 37%;
margin: -100px 0 0 -140px;
}
.search-wrapper{
position: relative;
background-color: #b2dfdb;
width: auto;
height: 15em;
text-align: center;
border: 1px solid #fff;
box-shadow: 1px 1px rgba(0,0,0,0.35);
}
.searchbar-wrapper{
vertical-align: middle;
width: auto;
margin: 20px;
margin-top: 70px;
}
.search-bar{
float: left;
width: 400px;
line-height: 30px;
}
<div class="search-container" id="mainpage-search">
<div class="search-wrapper">
<div class="searchbar-wrapper">
<div class="row">
<div class="search">
<form class="form">
<div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div>
<div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
我怎樣才能實現轉型?
您提供的信息是不夠的。你能詳細解釋一下嗎? – Kan412
,並且當該元素被取消選擇時,您希望它在頁面中間返回? –