HTML+CSS toggle switch checkbox

<label class="switch">
    <input type="checkbox" name="ma_belle_checkbox" value="ma_valeur" />
    <span class="slider round"></span>
</label>
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 35px; /* largeur du switch */
        height: 20px; /* hauteur du switch */
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc; /* couleur de fond du switch */
        -webkit-transition: .25s;
        transition: .25s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 16px; /* largeur du slider = moitié de la hauteur du switch mois une marge moins une marge de 4px */
        width: 16px; /* hauteur du slider = largeur du slider */
        left: 2px;
        bottom: 2px;
        background-color: #fff;  /* couleur du slider */
        -webkit-transition: .25s;
        transition: .25s;
    }
    input:checked + .slider {
        background-color: #6ce405; /* couleur de fond du switch lorsqu'il est actif */
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(15px); /* déplacement du switch lorsque c'est actif */
        -ms-transform: translateX(15px); /* déplacement du switch lorsque c'est actif */
        transform: translateX(15px); /* déplacement du switch lorsque c'est actif */
    }
    .slider.round {
        border-radius: 40px; /* arrondi = largeur du switch */
    }
    .slider.round:before {
        border-radius: 50%;
    }
</style>