我正在研究css搜索字段。你想帮我一些东西。如果您访问演示页面,您会看到搜索按钮前面有一个菜单。搜索栏已打开。我想留在最前面的菜单。
这是JsFiddle中的DEMO PAGE
HTML CODE:
<div class="b_t_menu3">
<div class="b_search">
<form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="beben-koben.blogspot.com" type="hidden">
<input type="search" class="search-field" placeholder="Search …" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
</div>
<div class="b_invitation"><a href="#">Menu</a></div>
</div>
和 CSS CODE:
.b_t_menu3 {
float:left;
width:259px;
height:35px;
margin-left:2px;
border:1px solid #000;
}
.b_invitation {
float:left;
width:auto;
height:35px;
margin-left:12px;
positon:absolute;
}
.b_invitation a{
color:#545454;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
text-decoration:none;
line-height:35px;
font-size:11px;
}
.b_search {
float:left;
width:35px;
height:35px;
}
.search-form .search-submit {
display: none;
}
input[type="search"] {
-webkit-appearance: textfield;
width: 0;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-form {
right: 10px;
top: 0px;
}
.search-field {
background-color: transparent;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
width: 0;
height: 35px;
margin: 0px 0;
padding: 0 0 0 35px;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
}
.search-field:focus {
background-color: #fff;
border: 2px solid #ccc;
cursor: text;
outline: 0;
width: 230px;
}
答案 0 :(得分:1)
我解决了我想要制作动画搜索引擎的答案。我想把它变成流行音乐,因为空间有限。流行搜索引擎前面有一个菜单。 当我点击搜索后,菜单上的搜索引擎我想留下来。我从来没有尝试过。照顾好这个问题。如果有帮助,我想和你分享。
这是我的教程演示。 JSfiddle HTML CODE:
<div class="b_t_menu3">
<div class="b_search">
<form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="Site içi arama" type="hidden">
<input type="search" class="search-field" placeholder="Search …" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
</div>
<div class="b_invitation"><a href="#">Menu</a></div>
</div>
CSS代码:
.b_t_menu3 {
float:left;
width:259px;
height:35px;
margin-left:2px;
border:1px solid #000;
}
.b_invitation {
float:left;
width:auto;
height:35px;
margin-left:52px;
z-index:-3;
}
.b_invitation a{
color:#545454;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
text-decoration:none;
line-height:35px;
font-size:11px;
}
.b_search {
float:left;
width:auto;
height:35px;
background-color:#fff;
position:absolute;
}
.search-form .search-submit {
display: none;
}
input[type="search"] {
-webkit-appearance: textfield;
width: 0;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-form {
right: 10px;
top: 0px;
}
.search-field {
background-color: transparent;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
width: 0;
height: 35px;
margin: 0px 0;
padding: 0 0 0 35px;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
}
.search-field:focus {
background-color: #fff;
border: 2px solid #ccc;
cursor: text;
outline: 0;
width: 259px;
}
答案 1 :(得分:0)
你想要的吗?只需离开&#34; b_invitation&#34; div和远程float
CSS属性。
http://jsfiddle.net/f62Zj/1/