LuLu UI组件中文文档 » 静态控件之搜索框

一、基本搜索框

• 搜索：

  /* type='search'必须，类名'ui-search-input'可缺省 */
  <input type="search" class="ui-input">

二、带搜索图标的搜索框

• 内联： 搜索

  <span class="ui-input ui-search-input">
      <input type="search">
      <a href="javascript:" class="ui-icon-search">搜索</a>
  </span>

• 内联, 图标右侧： 搜索

  <span class="ui-input ui-search-input ui-search-right">
      <input id="spanSearch" type="search" placeholder="测试">
      <label class="ui-icon-search">搜索</label>
  </span>

• 块状定宽：

  搜索

  如果是直接表单提交跳转式的搜索，使用label标签可访问性和易用性最好，直接for属性值关联submit类型按钮的id即可！

  <div class="ui-input ui-search-input ui-search-right" style="width:268px;">
      <input type="search" placeholder="测试">
      <a href="javascript:" class="ui-icon-search">搜索</a>
  </div>

• 块状：

  搜索

  <div class="ui-input ui-search-input">
      <input type="search">
      <a href="javascript:" class="ui-icon-search">搜索</a>
  </div>

三、单独使用搜索框样式

如果只想以插件形式单独使用搜索框的UI，而不是所有UI组件集合commom/ui.css，也是支持的，直接引入：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Input.css">

然后就可以参照上述文档使用了。

单独使用Demo演示

搜索框如果有使用placeholder属性，可以引入Placeholder.css对占位符样式进行设置。