Material and iOS Inspired Toggle Switch With CSS/SCSS

Category: CSS & CSS3 , Form | August 1, 2020
Author:miladd3
Views Total:452 views
Official Page:Go to website
Last Update:August 1, 2020
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:

08/01/2020

  • now the default direction for ON is right side

11/23/2018

  • added iOS styles

05/31/2018

  • add disabled style

You Might Be Interested In:


One thought on “Material and iOS Inspired Toggle Switch With CSS/SCSS

  1. Steve Walker (@stevewalkr)

    Hi there – we have used your library, and its great 🙂

    However, my question is – was there a reason why you chose the ON position to be to the left? Normally the ON position would be a switch to the right?

    And question following that is – is there an easy way to customise the library so the action reverse, so the ON position is to the right and not the left?

    Congratulations on such a cool library!

    Reply

Leave a Reply