Checkboxes

The special checkbox styles.

You can create your style for checkboxes via JS plugin very easy with us framework. For example:

HTML Example
// Checkbox checked:
<label class="checkbox">
   <input type="checkbox" name="checkbox-1" checked> 
   Checkbox
</label>

// Checkbox Unchecked:
<label class="checkbox">
   <input type="checkbox" name="checkbox-2"> 
   Checkbox checked
</label>

// Checkbox Disabled:
<label class="checkbox">
   <input type="checkbox" name="checkbox-3" checked disabled> 
   Checkbox disabled
</label>

// Checkbox Unchecked and Disabled:
<label class="checkbox">
   <input type="checkbox" name="checkbox-4" disabled> 
   Checkbox checked disabled
</label>

Radio buttons

The special radio button styles.

You can create your style for radio buttons via JS plugin very easy with us framework. For example:

HTML Example
// Radio button checked:
<label class="radio">
   <input type="radio" name="radiogroup1" checked> 
   Radio Button
</label>

// Radio button Unchecked:
<label class="radio">
   <input type="radio" name="radiogroup1"> 
   Radio Button
</label>

// Radio button Disabled:
<label class="radio">
   <input type="radio" name="radiogroup2" checked disabled> 
   Radio Button
</label>

// Radio button Unchecked and Disabled:
<label class="radio">
   <input type="radio" name="radiogroup2" disabled> 
   Radio Button
</label>
HTML Example
<select class="dropdown" name="select1">
   <option value="1">One</option>
   <option value="2" selected>Two</option>
   <option value="3">Three</option>
</select>

// HHTML result :

<div class="dropdown" id="dropdown-select1">
   <span>Two</span>
   <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three</li>
   </ul>
</div>

Switcher

The easy of creation and usage of a custom switch.

The use our custom switch more suitable for all websites. Our framework has 2 styles of switches: circle (default) and square. For example:













Switcher ON

Switcher of

Switcher Disbaled ON

Switcher Disbaled OFF
HTML Example
// Switch ON:
<label class="switch">
   <input type="checkbox" name="checkbox-1" checked> 
</label>

// Switch OFF:
<label class="switch">
   <input type="checkbox" name="checkbox-1"> 
</label>

// Switch ON Disabled:
<label class="switch">
   <input type="checkbox" name="checkbox-1" checked disabled> 
</label>

// Switch OFF Disabled:
<label class="switch">
   <input type="checkbox" name="checkbox-1" disabled> 
</label>

// Switch with text:
<label class="switch">
   <span class="on"> ON </span>
   <input type="checkbox" name="checkbox-1" disabled> 
   <span class="off"> OFF </span>
</label>

// Switch with icons & width:
<label class="switch width-2">
   <span class="on icon-chechk"></span>
   <input type="checkbox" name="checkbox-1" disabled> 
   <span class="off icon-close"></span>
</label>

Inputs

You can change the style of form elements.

To alter the radius of the border of input add the one of these classes .bradius-x (1,2,3,4)
If want alter the style of border of input add one of these classes .dotted, .dashed, .thick
You can alter the text align. For more information about it see the link
If you want the choosing version add the class .focus
If you add the class "input-bg" will be default background color.
IF you want without borders add the class .unborder
For example:











HTML Example
<input type="text" class="bradius-1 focus" placeholder="Name"/> 
<textarea class="bradius-1 focus" placeholder="Text"></textarea>

<input type="text" class="bradius-4 dashed" placeholder="Name"/> 

<div class="input icon-right  bradius-2">
   <span class="icon-search"></span>
   <input type="text" placeholder="Name"/> 
</div>

<div class="input icon-right  bradius-2">
   <span class="icon-location"></span>
   <input type="text" placeholder="Name"/> 
</div>