Material and iOS Inspired Toggle Switch With CSS/SCSS

Category: CSS & CSS3 , Form | November 23, 2018
Author: miladd3
Views Total: 1,003
Official Page: Go to website
Last Update: November 23, 2018
License: MIT

Preview:

Material and iOS Inspired Toggle Switch With CSS/SCSS

Description:

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

Alternatives:

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:

11/23/2018

  • added iOS styles

05/31/2018

  • add disabled style

You Might Be Interested In:

Leave a Reply