如何为可扩展的搜索栏编写代码，并将导航链接变成一个框？

Question

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

我知道代码不适合我想要实现的目标，但这是我在编码知识有限的情况下所能做到的最好的。

我应该提一下，目前的搜索功能不是特别好（即它没有返回它应该返回的所有结果，只是一些标记的元素），但我不确定问题出在哪里用那个。

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