/* Cachons la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

/* on prépare le label */
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
    position: relative;
    /* permet de positionner les pseudo-éléments */
    padding-left: 25px;
    /* fait un peu d'espace pour notre case à venir */
    /* affiche un curseur adapté */
}

/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    /* dim. de la case */
    border: 1px solid #aaa;
    background: #f8f8f8;
    border-radius: 3px;
    /* angles arrondis */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
        /* légère ombre interne */
}

/* Aspect général de la coche */
[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
    content: '✔';
    position: absolute;
    top: 0;
    left: 4px;
    font-size: 14px;
    color: #09ad7e;
    transition: all .2s;
    /* on prévoit une animation */
}

/* Aspect si "pas cochée" */
[type="checkbox"]:not(:checked)+label:after {
    opacity: 0;
    /* coche invisible */
    transform: scale(0);
    /* mise à l'échelle à 0 */
}

/* Aspect si "cochée" */
[type="checkbox"]:checked+label:after {
    opacity: 1;
    /* coche opaque */
    transform: scale(1);
    /* mise à l'échelle 1:1 */
}

/* aspect désactivée */
[type="checkbox"]:disabled:not(:checked)+label:before,
[type="checkbox"]:disabled:checked+label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

/* styles de la coche (si cochée/désactivée) */
[type="checkbox"]:disabled:checked+label:after {
    color: #999;
}

/* on style aussi le label quand désactivé */
[type="checkbox"]:disabled+label {
    color: #aaa;
}

/* aspect au focus de l'élément */
[type="checkbox"]:checked:focus+label:before,
[type="checkbox"]:not(:checked):focus+label:before {
    border: none;
}