Clean Switch

To adjust size of switch just add classes to the list of classes in switch ellement

<label class="cl-switch cl-switch-large">

	<input type="checkbox" >

	<span class="switcher"></span>

	<span class="label">this is large switch</span>

</label>

size classes are:

• cl-switch-large
• cl-switch-xlarge

to make a switch disable simply add disabled attribute to checkbox

<label class="cl-switch">
	<input type="checkbox" disabled>
	<span class="switcher"></span>
	<span class="label">Disabled</span>
</label>

To adjust color of the switch just add classes to the list of classes in switch ellement

<label class="cl-switch cl-switch-red">

	<input type="checkbox" >

	<span class="switcher"></span>

	<span class="label">this is red switch</span>

</label>

color classes are:

• cl-switch-black
• cl-switch-red
• cl-switch-green
• cl-switch-orange

For Some projects you will need custom color so you can do it with small CSS

1- first you should add a class to class list of cl-switch in this example its custom-class

<label class="cl-switch custom-class">

	<input type="checkbox" >

	<span class="switcher"></span>

	<span class="label">this is custom color switch</span>

</label>

2- then you should adjust its color in your css that is loaded after cl-switch css

.custom-class input[type="checkbox"]:checked + .switcher {
  background: #c06651; /*this is body of switch that should be lighter color*/
}
.custom-class input[type="checkbox"]:checked + .switcher:before {
  background: #c0392b; /*this is btn of switch that should be darker color*/
}

if you are an iOS fan, you can have iOS style too and all sizing and colors works fine with iOS too

<label class="cl-switch ios">
	<input type="checkbox">
	<span class="switcher"></span>
	<span class="label">title</span>
</label>