CSS to create a CSS3 only slider.

checkboxslider.css

input[type=checkbox] {
  border: 1px solid #686868;
  height: 27px;
  width: 79px;
  -webkit-appearance: none;
  -webkit-border-radius: 13px;
  background-image: url(/blog/wp-content/uploads/2011/12/checkbox-background.png);
  background-position: -52px 0;
  background-repeat: no-repeat;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 400ms;
  -webkit-animation-name: checkbox-switch-off;
}

input:checked[type=checkbox] {
  background-position: 0 0;
  -webkit-animation-name: checkbox-switch-on;
}


@-webkit-keyframes checkbox-switch-on {
  from {
    background-position: -52px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-webkit-keyframes checkbox-switch-off {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -52px 0;
  }
}