Top

搜索框

a) 更换按钮颜色，请参考通用样式更换形如.dsure-bg-???的样式
    b) 使用圆角效果, 请参考通用样式更换形如.dsure-radius-???的样式(9.0版本以下IE浏览器无效)

所有搜索框及其按钮元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) 并列式搜索框

 
HTML代码:

<form class="dsure-form-search">
    <input class="dsure-form-search-b dsure-btn-t-white dsure-bg-blue" type="submit" value="搜索" />
	<input class="dsure-form-search-t" size="22" type="text" placeholder="Search"/>
</form>

<form class="dsure-form-search">
	<input class="dsure-form-search-t" size="22" type="text" placeholder="Search"/>
	<input class="dsure-form-search-b dsure-btn-t-white dsure-bg-blue" type="submit" value="搜索" />
</form>

<form class="dsure-form-search">
	<input class="dsure-form-search-t dsure-radius-big" size="22" type="text" placeholder="Search" />
	<input class="dsure-form-search-b dsure-btn-t-white dsure-bg-black dsure-radius-big ma-l10" type="submit" value="搜索" />
</form>

<form class="dsure-form-search">
	<input class="dsure-form-search-t" size="22" type="text" placeholder="Search"/>
	<button type="submit" class="dsure-form-search-b dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-search"></i></button>
</form>

(2) 一体式搜索框

 
HTML代码:

<form class="dsure-form-search dsure-form-search-comb dsure-form-search-comb-left">
	<input class="dsure-form-search-t" size="20" type="text" placeholder="Search"/>
	<button type="submit" class="dsure-form-search-b"><i class="dsure-icon dsure-icon-search"></i></button>
</form>

<form class="dsure-form-search dsure-form-search-comb">
	<input class="dsure-form-search-t" size="22" type="text" placeholder="Search"/>
	<button type="submit" class="dsure-form-search-b"><i class="dsure-icon dsure-icon-search"></i></button>
</form>

<form class="dsure-form-search dsure-form-search-comb">
	<input class="dsure-form-search-t dsure-radius-big" size="22" type="text" placeholder="Search"/>
	<button type="submit" class="dsure-form-search-b"><i class="dsure-icon dsure-icon-search"></i></button>
</form>

(3) 无背景搜索框

自定义.dsure-form-search的容器背景即可个性化搜索框 

 
HTML代码:

<form class="dsure-form-search dsure-form-search-nobg" style="padding:.2em .8em; background:#FAF3C5">
	<input class="dsure-form-search-t" size="20" type="text" placeholder="Search"/>
	<button type="submit" class="dsure-form-search-b"><i class="dsure-icon dsure-icon-search"></i></button>
</form>

(4) 带下拉选项的搜索框

 
HTML代码:


<form class="dsure-form-search dsure-form-search-select dsure-form-search-comb">
    <span class="dsure-selectBox">
        <span class="dsure-selectBox-inner">
            <select>
                  <option>文章</option>
                  <option>案例</option>
            </select>
        </span>
    </span>
    <input class="dsure-form-search-t" size="20" type="text" placeholder="Search"/>
    <button type="submit" class="dsure-form-search-b"><i class="dsure-icon dsure-icon-search"></i></button>
</form>