tumblrでタグの検索ボックスの結果

Question

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>

Answer 1

OK、うまく機能的に次のコードは動作するはずです（それはuのですntested）。

私は基本的に、あなたのコードを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>