THEMETRIAL

Material and iOS Inspired Toggle Switch With CSS/SCSS

Author:miladd3
Views Total:1 view
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="https://www.cssscript.com/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

05/31/2018


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.