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

Fork Me

静态控件之搜索框

一、基本搜索框

  • 搜索:

    /* 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对占位符样式进行设置。

Fork Me 返回顶部