纯CSS带互动图标按钮的搜索框【原创】

也的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置好搜索框、图标按钮等的容器即可，结构还是比较简单的，代码如下：

<div class="container">
  <input class="main"/><span class="searchicon"></span>
  <div class="microphone">
    <div class="mic-stand"></div>
  </div>
  <div class="icon-holder">
    <div class="icon" id="parking">
      <div class="tooltip">停车</div>
    </div>
    <div class="icon" id="gas">
      <div class="base"></div>
      <div class="tooltip">加油</div>
    </div>
    <div class="icon" id="eat">
      <div class="fork"></div>
      <div class="knife"></div>
      <div class="tooltip">美食</div>
    </div>
    <div class="icon" id="coffee">
      <div class="cup"></div>
      <div class="tooltip">咖啡</div>
    </div>
    <div class="icon" id="misc">
      <div class="dots"></div>
      <div class="tooltip">更多</div>
    </div>
  </div>
</div>