搜索栏
一般可位于导航栏下方，通过『取消按钮』退出激活状态。
规则
- 提供提示文案，帮助用户输入，eg：关键词。
- 在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，eg：最近搜索的内容。
代码演示
搜索栏
搜索医院、医生
输入状态
搜索医院、医生
搜索栏
.search-focus控制搜索栏激活状态
<div class="search-wrapper">
<div class="search">
<span class="search-icon icon-search"></span>
<div class="search-text">搜索医院、医生</div>
<input type="text" class="search-input">
<span class="search-close"></span>
</div>
<button class="search-canel">取消</button>
</div>
<br>
<div class="search-wrapper search-focus">
<div class="search">
<span class="search-icon icon-search"></span>
<div class="search-text">搜索医院、医生</div>
<input type="text" class="search-input">
<span class="search-close icon-cross"></span>
</div>
<button class="search-canel">取消</button>
</div>