CSS: Toggle Checkbox(iPhone Style)

index.html

<div class="toggle">
  <input type="checkbox" id="toggle1" />
  <div class="toggle-handle"></div>
  <label for="toggle1" onclick></label>
</div>

style.css

.toggle {
  margin: 15px;
  position: relative;
}
.toggle input[type="checkbox"] {
  opacity: 0;
  position:absolute;
}
.toggle label {
  background-color: #EEEEEE;
  border: 1px solid #BBBBBB;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) inset;
  height: 28px;
  position: relative;
  width: 75px;
  display: block;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.toggle input:checked ~ label {
  background-color: #19A8E4;
  background-image: linear-gradient(to bottom, #088CD4 0px, #19A8E4 100%);
  border: 1px solid #096C9D;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.25) inset;
}
.toggle .toggle-handle {
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, #FFFFFF 0px, #F2F2F2 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 100px 100px 100px 100px;
    height: 28px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.1s ease-in-out 0s, border 0.1s ease-in-out 0s;
    transition: transform 0.1s ease-in-out 0s, border 0.1s ease-in-out 0s;
    width: 28px;
    z-index: 2;
    pointer-events: none;
}
.toggle input:checked + .toggle-handle {
    border-color: #0A76AD;
    -webkit-transform: translate3d(48px, 0px, 0px);
    transform: translate3d(48px, 0px, 0px);
}
.toggle label:after {
    color: #777777;
    content: "Off";
    font-weight: bold;
    line-height: 28px;
    position: absolute;
    right: 13px;
    text-shadow: 0 1px #FFFFFF;
    text-transform: uppercase;
}
.toggle input:checked ~ label:after {
    color: #FFFFFF;
    content: "On";
    left: 15px;
    right: auto;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
}