A **switch** is a common control element that is used to take input from users. Much like a​ real switch, it has two states: ​on and off.

## Implementation

The following will be used to create a switch:
1. **HTML** will be used to create a checkbox.
2. **CSS** will be used to style the checkbox to make it look like a switch.

/* The check box should not be visible */
.box input { 
  opacity: 0;
}
/* The box around the button for a switch */
.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* The cursor should change, to indicate to the user that the
  button is clickable */
  cursor: pointer;
  position: relative;
  display: inline-block; 
  width: 65px;
  height: 30px;
  background: #FBF2ED;
  border-radius: 10%;
}
/* The button of the switch. */
.slider:before {
  position: absolute;
  content: "";
  height: 29px;
  width: 28px;
  left: 1px;
  bottom: 1px;
  top: 1px;
  background: #FFAFA4;
  border-radius: 10%;
}
/* Once the button is pressed, move it to the left */
input[type=checkbox]:checked + .slider:before {
  left: 37px;
}
/* Also, change the background color of the box around the button */
input[type=checkbox]:checked + .slider{
  background-color: #FCE3DE;
}


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

How to create a switch using CSS

Implementation