Il en faut pour décorer un sapin de Noël !
Alors une nouvelle checkbox !

Deuxième checkbox personalisée


<div id="checkbox2">
  <p>
     <input checked="" id="mynewcheckbox" name="mynewcheckbox" value="true" type="checkbox">
     <label for="mynewcheckbox">Cool non ?</label>
   </p>
</div>

Et puis le css bien sûr.


#checkbox2  [type="checkbox"]:not(:checked), 
#checkbox2  [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
#checkbox2 input[type="radio"], #checkbox2 input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
#checkbox2 input[type="checkbox"], #checkbox2 input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

#checkbox2 [type="checkbox"]:not(:checked), 
#checkbox2 [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
#checkbox2  [type="checkbox"]:not(:checked) + label, 
#checkbox2  [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 15px;
    cursor: pointer;
    display: block;
    max-width: 200px;
}
#checkbox2  [type="checkbox"]:not(:checked) + label::before, 
#checkbox2 [type="checkbox"]:checked + label::before, 
#checkbox2  [type="checkbox"]:not(:checked) + label::after, 
#checkbox2 [type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
}
#checkbox2  [type="checkbox"]:not(:checked) + label::before, 
#checkbox2  [type="checkbox"]:checked + label::before {
    right: 30px;
    top: -3px;
    width: 44px;
    height: 24px;
    background: #DDDDDD;
    border-radius: 15px;
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -ms-transition: background-color .2s;
    transition: background-color .2s;
}
#checkbox2  [type="checkbox"]:checked + label::before {
    background: #f0a526;
}
#checkbox2  [type="checkbox"]:checked + label .ui, 
#checkbox2  [type="checkbox"]:not(:checked) + label .ui::before, 
#checkbox2  [type="checkbox"]:checked + label .ui::after {
    position: absolute;
    left: 6px;
    top: 0;
    width: 65px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    transition: all .2s;
}

#checkbox2  [type="checkbox"]:not(:checked) + label::after, 
#checkbox2  [type="checkbox"]:checked + label::after {
    width: 20px;
    height: 20px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    transition: all .2s;
    border-radius: 50%;
    background: #ffffff;
    top: -1px;
    right: 53px;
    box-shadow: -1px 1px 3px 0px;
}
#checkbox2 [type="checkbox"]:checked + label::after {
    background: #ffffff;
    top: -1px;
    right: 31px;
}