html - 请问我如何让搜索框在(移动 View )中消失并且只搜索字形？

Question

请问我如何让搜索框在(移动 View )中消失并且只有搜索字形？仅当按下放大镜/glyphicon-search 时才会出现搜索框？谢谢!

Answer 1

仅针对 search box 添加媒体查询和添加属性 display="none"，对于搜索 glyphicon，您可以使用 display="block"。

按照这个示例:

CSS:

 @media only screen and (max-width: 600px) {
     .searchBox{
       display:none;
     }
     .searchIcon{
      display: block;
     }
 }

html:

<div>
 <input class="searchBox" type="search" name="searchBox" 
  placeholder="search">
 <span class="glyphicon glyphicon-search searchIcon"></span>
</div>