我最近在我的 tumblr 博客上添加了一个搜索框,它看起来像 this ,但是当我在搜索框中输入“标签”并按回车/搜索按钮时,搜索结果页面中什么也没有显示。我想我有错误的 html 代码。请帮助我为此搜索框编写正确的 html 代码。
CSS:
#search1{
top:185px;
float: left;
margin-left: 68%;
width: 300px;
display: block;
position: absolute;
z-index:3;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.container-4{
overflow: hidden;
width: 300px;
vertical-align: middle;
white-space: nowrap;
}
.container-4 input#search{
width: 300px;
height: 50px;
background: #40c143;
border: none;
font-size: 14pt;
float: left;
color: #fff;
padding-left: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.container-4 input#search::-webkit-input-placeholder {
color: #fff;
}
.container-4 input#search:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
.container-4 input#search::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
.container-4 input#search:-ms-input-placeholder {
color: #fff;
}
.container-4 button.icon{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background: #fff;
height: 50px;
width: 50px;
color: #4f5b66;
opacity: 0;
font-size: 10pt;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
outline: none;
opacity: 1;
margin-left: -50px;
}
.container-4:hover button.icon:hover{
background: white;
}
HTML:
<div id="search1">
<div class="container-4">
<input type="search" id="search" placeholder="Search..." />
<button class="icon"><i class="fa fa-search"></i></button>
</div>
</div>
最佳答案
好的,从功能上讲,下面的代码应该可以工作(但未经测试)。
我基本上只是将您的代码与 tumblr 文档中的代码合并了。
您将遇到的问题是设置按钮的样式。由于此标记略有不同,但正如我所说,我已尝试将其合并。
<div id="search1">
<div class="container-4">
<form action="/search" method="get">
<input type="text" id="search" name="q" value="{SearchQuery}" placeholder="Search..."/>
<button class="icon" type="submit">Search<i class="fa fa-search"></i></button>
</form>
</div>
</div>
关于html - tumblr 中标签的搜索框结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36675217/