Custom Design Of On/Off Switch

Custom Design of On/Off Switch

This is the custom design of On/Off switch OR toggle button for checkbox and radio button. You can use below code for On/Off switch without using any jQuery code and JS libraries. You do not need any icons & images.

Features:

  • Support in all browsers, OS & devices (Android & iPhone)
  • Need not use any external js, script and libraries
  • SCSS and CSS both codes are available
  • Compatible with IE9 and higher 
  • Below codes are working for checkbox & radio buttons both
  • With Animation effects 
  • Easy to use

How To Create a On/Off switch


Step 1: Manage HTML structure


HTML: Please use below HTML code

<label>
  <div class="on-off-switch">
    <input value="1" class="switched-item" type="checkbox">
    <!-- On Off switch -->
    <div class="on-off-wrap switched-off">   
     <span class="on-off-icon"></span>  
     <span class="on-off-text on-text">On</span>  
     <span class="on-off-text off-text">Off</span>  
   </div>
 </div>
</label>

You can also use jQuery code to maintain HTML structure of <input> tag when HTML file is not editable.

JS:

jQuery(document).ready(function() {
    jQuery('input.switched-item').wrap('<div class="on-off-switch"></div>');
    var on_off_div = '<!-- On Off switch -->\
    <div class="on-off-wrap switched-off">\
      <span class="on-off-icon"></span>\
      <span class="on-off-text on-text">On</span>\
      <span class="on-off-text off-text">Off</span>\
    </div>';
    jQuery('.on-off-switch').append(on_off_div);

    jQuery('input.switched-item').on('change', function() {
      if (jQuery(this).is(':checked')) {
        jQuery(this).siblings('.on-off-wrap').addClass('switched-on');
        jQuery(this).siblings('.on-off-wrap').removeClass('switched-off');
      }
      else {
        jQuery(this).siblings('.on-off-wrap').removeClass('switched-on');
        jQuery(this).siblings('.on-off-wrap').addClass('switched-off');
      }
    });
  });

Step 2: Use below SCSS code:

SASS:

/**
 * On-Off Switch button
 */
.on-off-switch {
  position: relative;
  * {
    line-height: normal;
    vertical-align: top;
  }
  input {
    display: inline-block;
    opacity: 0;
  }
  .on-off-wrap {
    position: relative;
    display: inline-block;
    height: 34px;
    width: 60px;
    padding: 3px 8px;
    border-radius: 100px;
    background-color: green;
    transition: all .7s ease 0s;
    cursor: pointer;
    &.switched-on {
      background-color: green;
      text-align: left;
      .on-off-icon {
        left: -webkit-calc(100% - 33px);
        left: -moz-calc(100% - 33px);
        left: calc(100% - 33px);
        background-color: white;
        background-position: right center;
      }
      .on-text {
        display: inline-block;
        font-size: inherit;
        opacity: 1;
        visibility: visible;
      }
      .off-text {
        display: none;
        font-size: 0;
        opacity: 0;
        visibility: hidden;
      }
    }
    &.switched-off {
      background-color: gray;
      text-align: right;
      .on-off-icon {
        left: 6px;
      }
      .on-text {
        display: none;
        font-size: 0;
        opacity: 0;
        visibility: hidden;
      }
      .off-text {
        display: inline-block;
        font-size: inherit;
        opacity: 1;
        visibility: visible;
      }
    }
    .on-off-icon {
      position: absolute;
      top: 0;
      display: inline-block;
      height: 26px;
      width: 26px;
      margin: 7px 0 0;
      border-radius: 100px;
      background-color: white;
      content: '';
      transition: all .7s ease 0s;
    }
    .on-off-text {
      margin-top: 6px;
      color: white;
      font-size: 0;
      text-transform: uppercase;
      transition: all .7s ease 0s;
    }
  }
}

CSS:

 

.on-off-switch {
  position: relative;
}
.on-off-switch * {
  line-height: normal;
  vertical-align: top;
}
.on-off-switch input {
  display: inline-block;
  opacity: 0;
}
.on-off-switch .on-off-wrap {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 60px;
  padding: 3px 8px;
  border-radius: 100px;
  background-color: green;
  transition: all .7s ease 0s;
  cursor: pointer;
}
.on-off-switch .on-off-wrap.switched-on {
  background-color: green;
  text-align: left;
}
.on-off-switch .on-off-wrap.switched-on .on-off-icon {
  left: -webkit-calc(100% - 33px);
  left: -moz-calc(100% - 33px);
  left: calc(100% - 33px);
  background-color: white;
  background-position: right center;
}
.on-off-switch .on-off-wrap.switched-on .on-text {
  display: inline-block;
  font-size: inherit;
  opacity: 1;
  visibility: visible;
}
.on-off-switch .on-off-wrap.switched-on .off-text {
  display: none;
  font-size: 0;
  opacity: 0;
  visibility: hidden;
}
.on-off-switch .on-off-wrap.switched-off {
  background-color: gray;
  text-align: right;
}
.on-off-switch .on-off-wrap.switched-off .on-off-icon {
  left: 6px;
}
.on-off-switch .on-off-wrap.switched-off .on-text {
  display: none;
  font-size: 0;
  opacity: 0;
  visibility: hidden;
}
.on-off-switch .on-off-wrap.switched-off .off-text {
  display: inline-block;
  font-size: inherit;
  opacity: 1;
  visibility: visible;
}
.on-off-switch .on-off-wrap .on-off-icon {
  position: absolute;
  top: 0;
  display: inline-block;
  height: 26px;
  width: 26px;
  margin: 7px 0 0;
  border-radius: 100px;
  background-color: white;
  content: '';
  transition: all .7s ease 0s;
}
.on-off-switch .on-off-wrap .on-off-text {
  margin-top: 6px;
  color: white;
  font-size: 0;
  text-transform: uppercase;
  transition: all .7s ease 0s;
}

Hope these steps helped you for quicker solution and for Web Design Service contact us now.

Feel free to add your inputs and feedbacks and stay tuned for more blogs.