如何通過帶有鏈接的導航鏈接來為可擴展搜索欄編寫代碼？

Question

我意識到這個問題一定很難理解，但是我真的不知道如何用幾句話來解釋我要達到的目標。 簡而言之，我正在嘗試使用一種搜索功能來自定義tumblr主題，當人們將鼠標懸停在該主題上時，它看起來像一個鏈接，但是當單擊它時，它就像一個可擴展的搜索框。 基本上是這樣的： 搜索框

我的目前看起來像這樣： 我的搜索框

這是代碼：

  .nav { font-family: 'Montserrat' 'Helvetica Neue' "Arial", serif; text-transform: uppercase; font-weight: 400; padding: 16px 0; margin-bottom: 80px; font-size: 12px; text-align: center; border-bottom: 2px solid {color:Dividers}; } .nav li { margin:0 10px; display: inline; line-height: 1; } .nav a { text-decoration: none; color: {color:Nav} } .nav body { background: #fff; color: #666; font: 90%/180% 'Montserrat' 'Helvetica Neue' "Arial", serif; width: 800px; max-width: 96%; margin: 0 auto; } /*a { color: #69C; text-decoration: none; } a:hover { color: #F60; }*/ h1 { font: 12px; line-height: 110%; color: #000; } p { margin: 0 0 20px; } input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 12px; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } input[type=search] { background: #ededed url(https://static.tumblr.com/ftv85bp /MIXmud4tx/search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: #fff; border-color: #66CC75; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); } input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } 

 <div class="nav"> {block:HasPages} {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages} {/block:HasPages} {block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled} {block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled} <li><a href="/archive">Archive</a></li> <li><form style="display: inline-block" action='/search'class='search-form' id='nav-search' method='get'> <input class='header-search-field' name='q' type='search' placeholder='Search'/></form> </li> </div> 

我知道代碼不是我想要達到的目標的正確方法，但這是我在有限的編碼知識上能做的最好的事情。

我應該提到，搜索功能目前無法很好地工作（即，它不能返回應有的所有結果，只是返回一些標記的元素），但是我不確定問題出在哪里。

Answer 1

您可以編輯css文件以獲得所需的效果。 在您的情況下， input[type=search]標記是一個定義搜索框未聚焦時的外觀的標記。 為了刪除邊框，請定義border:none屬性，否則它將默認為瀏覽器的值。

您可能還不希望background屬性使用放大鏡圖標將搜索框變為灰色。 因此，css文件的段更改為：

    input[type=search] {
      border: none;
      padding: 9px 10px 9px 32px;
      width: 55px;
      ...
    }

片段：

  .nav { font-family: 'Montserrat' 'Helvetica Neue' "Arial", serif; text-transform: uppercase; font-weight: 400; padding: 16px 0; margin-bottom: 80px; font-size: 12px; text-align: center; border-bottom: 2px solid {color:Dividers}; } .nav li { margin:0 10px; display: inline; line-height: 1; } .nav a { text-decoration: none; color: {color:Nav} } .nav body { background: #fff; color: #666; font: 90%/180% 'Montserrat' 'Helvetica Neue' "Arial", serif; width: 800px; max-width: 96%; margin: 0 auto; } /*a { color: #69C; text-decoration: none; } a:hover { color: #F60; }*/ h1 { font: 12px; line-height: 110%; color: #000; } p { margin: 0 0 20px; } input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 12px; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } input[type=search] { border: none; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: #fff; border-color: #66CC75; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); } input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } 

 <div class="nav"> {block:HasPages} {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages} {/block:HasPages} {block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled} {block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled} <li><a href="/archive">Archive</a></li> <li><form style="display: inline-block" action='/search'class='search-form' id='nav-search' method='get'> <input class='header-search-field' name='q' type='search' placeholder='Search'/></form> </li> </div> 

如果您希望在單擊搜索框時編輯背景色，則必須將該屬性添加到input[type=search]:focus標記中。