A CSS, which turns boring checkboxes into nice On/Off switches. Just include it in your styles.

Switch.css

input[type="checkbox"] {
    -webkit-appearance: none;
    border: 2px solid #bdbdbd;
    width: 61px;
    height: 27px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    outline: none;
    cursor: pointer;
}

/* Text content */
input[type="checkbox"]:before {
    top: 0px;
    left: 0px;
    width: 57px;
    height: 23px;
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    content: 'ON \00a0OFF';
    line-height: 23px;
    position: absolute;
    text-align: center;
    font-family: OpenSans_Bold, arial;
}

/* Rectangle to be switched */
input[type="checkbox"]:after {
    top: 2px;
    left: 2px;
    content: '';
    width: 25px;
    height: 19px;
    display: block;
    position: absolute;
    background: #bdbdbd;
    -webkit-transition: all .3s ease-out;
}

/* Checked states */
input[type="checkbox"]:checked {
    border-color: #25bfa1;
}

input[type="checkbox"]:checked:before {
    color: #25bfa1;
}

input[type="checkbox"]:checked:after {
    left: 29px;
    background: #25bfa1;
}