如何为可扩展搜索栏编写代码，将导航 link 变成一个方框？

Question

我意识到这个问题一定很难理解，但我真的不知道如何用几句话来解释我想要实现的目标。简而言之，我正在尝试使用搜索功能自定义一个 tumblr 主题，当将鼠标悬停在它上面时，它看起来像 link，但当点击它时，它就像一个可扩展的搜索框。基本上是这样的：search box

我的现在看起来像这样：my search box

代码如下：

    .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>

我知道代码不是我想要实现的目标的正确代码，但这是我有限的编码知识所能做到的最好的。

我应该提一下，目前的搜索功能不是特别好（即它没有 return 它应该的所有结果，只有几个标记的元素），但我不知道问题出在哪里。

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 标签。

如何为可扩展搜索栏编写代码，将导航 link 变成一个方框？

How to write code for an expandable search bar, with a nav link that becomes a box?

html

javascript

css

jquery

tumblr