Material and iOS Inspired Toggle Switch With CSS/SCSS

Preview:

Description:

A customizable, nice clean, iOS- and Google Material Design-style toggle switch library created using pure CSS/SCSS.

Alternatives:

• 10 Best Toggle Switch JavaScript And CSS Libraries

How to use it:

Import the stylesheet ‘clean-switch.css’ into the document and we’re ready to go.

<link href="clean-switch.css" rel="stylesheet">

The HTML to create a default toggle switch.

<label class="cl-switch">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>

Change the default size of the toggle switch.

<h2>Large</h2>
<label class="cl-switch cl-switch-large">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>
<h2>X-Large</h2>
<label class="cl-switch cl-switch-xlarge">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>

Change the default theme of the toggle switch. Built-in themes:

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

<label class="cl-switch cl-switch-xlarge cl-switch-red">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>
<label class="cl-switch cl-switch-xlarge cl-switch-black">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>
<label class="cl-switch cl-switch-xlarge cl-switch-green">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>
<label class="cl-switch cl-switch-xlarge cl-switch-orange">
  <input type="checkbox" checked>
  <span class="switcher"></span>
  <span class="label">Toggle Switch</span>
</label>

You can also customize the toggle switch using your own CSS styles.

.your-theme input[type="checkbox"]:checked + .switcher {
  background: #222; 
}
.your-theme input[type="checkbox"]:checked + .switcher:before {
  background: #333;
}

Create iOS style toggle switches.

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

Changelog:

08/01/2020

• now the default direction for ON is right side

11/23/2018

• added iOS styles

05/31/2018

• add disabled style