Toggle Switch CSS

by nevkatz

HTML

<div id="gen_settings">

<label class="switch">
  <input type="checkbox">
  <span class="toggle-switch"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="toggle-switch"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="toggle-switch round"></span>
</label>


<label class="switch">
  <input type="checkbox" checked>
  <span class="toggle-switch round"></span>
</label>
<div class="ui-content">
</div>
<!--
<div id="same-line-label">
<label class="text">Auto-upload</label>
<label class="switch">
  <input type="checkbox" checked>
  <span class="toggle-switch round"></span>
</label>

</div>
</div>-->

CSS

/* css styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-switch:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

label.switch input:checked + .toggle-switch {
  background-color: #2196F3;
}

label.switch input:focus + .toggle-switch {
  box-shadow: 0 0 1px #2196F3;
}

label.switch input:checked + .toggle-switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.toggle-switch.round {
  border-radius: 34px;
}

.toggle-switch.round:before {
  border-radius: 50%;
}

/* tests */
#auto-upload-label {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
label.same-line-label,
label.text {
  font-size: 26px;
  padding: 2px 0px;
  font-family: Verdana;
  margin-top: 10px;
  margin-right: 10px;
}
#auto-upload-label label.switch {
   margin-top: 10px; 
}
#auto-upload-label label.switch input:checked + .toggle-switch {
  background-color: green;
}

JavaScript

function get_switch (id,checked) {
  let label = document.createElement('label');
  label.className = 'switch';
  let input = document.createElement('input')
  input.id = id;
  input.checked = checked;
  input.type = 'checkbox';
  let span = document.createElement('span');
  span.className = 'toggle-switch round';
  label.appendChild(input);
  label.appendChild(span);
  return label;
}
function add_switch(id,checked) {
 // let pageId = localStorage.getItem('current-page');
 
 
 let root = document.querySelector('#gen_settings .ui-content');
   let container = document.createElement('div');
  container.id = id+'-label';

  let switch_label = document.createElement('label');
  switch_label.textContent = 'Auto-upload';
  switch_label.className = 'same-line-label';
  let my_switch = get_switch(id,checked);
  container.appendChild(switch_label);
  container.appendChild(my_switch);
  root.appendChild(container);
}


function init() {
  let id='auto-upload', checked = true;
  add_switch(id,checked);
}

 
init();