搜索框

基本样式

普通的搜索可由上一节的内联样式创建，即搜索输入框加上提交按钮。

    <form>
      <div class="input-inline">
        <input class="input" type="text" placeholder="关键词" />
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

搜索图标

给搜索框加上图标

    <form>
      <div class="input-inline">
        <div class="input-inline-auto input-icon">
          <span><i class="icon-search"></i></span>
          <input class="input" type="text" placeholder="关键词" data-form="clear" />
          <span><i class="icon-danger-bg"></i></span>
        </div>
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

下拉选项

也可使用下拉菜单的搜索选项：

    <form>
      <div class="input-inline">
        <div class="addon">
          <select class="input"><option>选项</option><option>选项</option></select>
        </div>
        <input class="input" type="text" placeholder="关键词" />
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

半圆效果

也可使用下拉菜单的搜索选项：

    <form>
      <div class="input-inline input-radius">
        <div class="addon">
          <select class="input"><option>选项</option><option>选项</option></select>
        </div>
        <div class="input-inline-auto input-icon">
          <span><i class="icon-search"></i></span>
          <input class="input" type="text" placeholder="关键词" data-form="clear" />
          <span><i class="icon-danger-bg"></i></span>
        </div>
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

搜索组

除搜索内联输入框外，还可以添加选项卡及下拉菜单的搜索组样式。

选项卡

    <form>
      <div class="input-search">
        <div class="option">
          <label><input type="radio" name="radio" checked /><span>选项</span></label>
          <label><input type="radio" name="radio" /><span>选项</span></label>
          <label><input type="radio" name="radio" /><span>选项</span></label>
        </div>
        <div class="input-inline">
          <div class="input-inline-auto input-icon">
            <input class="input" type="text" placeholder="关键词" data-form="clear" />
            <span><i class="icon-danger-bg"></i></span>
          </div>
          <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
        </div>
      </div>
    </form>
  

下拉菜单

在触发输入框时，显示下拉菜单。

    <form>
      <div class="input-search drop">
        <div class="input-inline">
          <div class="addon">
            <select class="input"><option>选项</option><option>选项</option></select>
          </div>
          <input class="input" type="text" placeholder="关键词" data-drop="click" />
          <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
        </div>
        <div class="dropdown">
        ...
        </div>
      </div>
    </form>