前言

做网站经常会用到搜索框，但是简陋的搜索框会望而止步，而臃肿的搜索框则会劝退用户。

这时，一款 简洁 的搜索框就诞生了。

正文

前排提示

欲使用本次介绍的任何一款搜索框，都请务必添加如下代码。

<link href="https://bohanjun.github.io/search-box/search.min.css" rel="stylesheet">

今天，我们要介绍的这款搜索框叫 Pi Search Box。

她，有以下几款。

样式A

<div class="piSearchBoxA" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <span class="startButton">开始</span>
</div>

样式B

<div class="piSearchBoxB" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <span class="startButton">开始</span>
</div>

样式C

<div class="piSearchBoxC" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <span class="startButton">开始</span>
</div>

样式D

<div class="piSearchBoxD" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
</div>

<div class="piSearchBoxDLeft" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
</div>

<div class="piSearchBoxDRight" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
</div>

样式E

<div class="piSearchBoxE" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <span class="startButton">开始</span>
</div>

样式F

<div class="piSearchBoxFLeft" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <i class="searchIcon"></i>
</div>

<div class="piSearchBoxFRight" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <i class="searchIcon"></i>
</div>

样式G

<div class="piSearchBoxG" style="width: 400px; margin: auto">
    <input class="inputBox" placeholder="搜索无需繁琐">
    <span class="startButton"><i class="searchIcon"></i></span>
</div>

小结

以上便是所有 Pi Search Box 的 Demo 和 Code。博瀚君又双叒叕非常愉快地水了一篇文章。我们下期再见～拜拜～