iOS toggle indicator written in pure CSS. See it in action: https://jsbin.com/harule

index.html

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

style.css

.toggle { cursor: pointer; }

// Uses a phony input element and makes use of its `:checked` state
.toggle-phony {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

// Visual element that represent our toggle component
.toggle-indicator {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: lightgray;
  border-radius: 15px;
  position: relative;
  transition: background-color 0.25s linear;
}

.toggle-indicator::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: #FFF;
  top: 2px;
  left: 2px;
  transform: translateX(0);
  transition: transform 0.25s ease-in-out;
}

// Uses sibling selector to apply visual changes for the active state
.toggle-phony:checked ~ .toggle-indicator::before { transform: translateX(30px); }
.toggle-phony:checked ~ .toggle-indicator { background-color: #34D27C; }

if you reduce the width by 10px, it becomes the very same switch as in iOS. Thanks for the share!