Top

Search Box

Use any of the available classes of Base Stylesheets to quickly create a custom style.

(1) Style 1

 
HTML Code:

<form class="dsure-form-search">
    <input class="dsure-form-search-b dsure-btn-t-white dsure-bg-blue" type="submit" value="Search" />
	<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="Search" />
</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="Search" />
</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) Style 2

 
HTML Code:

<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) Style 3

 
HTML Code:

<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) Style 4

 
HTML Code:


<form class="dsure-form-search dsure-form-search-select dsure-form-search-comb">
    <span class="dsure-selectBox">
        <span class="dsure-selectBox-inner">
            <select>
                  <option>Category 1</option>
                  <option>Category 2</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>