checkbox focus 기본값 좀 제거해보자.

checkbox 를 좀 이쁘게 꾸며보자.

[type='checkbox'] {
    vertical-align: middle;
    appearance: none;
    border-color: #29b6c6;
    transition: border 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    border-radius: 20%;
}
[type='checkbox']:focus {
    box-shadow: 0 0 0 0.2rem rgba(41, 182, 198, 0.25);
}
[type='checkbox']:checked {
    background-color: #29b6c6;
}

[type='checkbox']:checked:hover {
    background-color: #29b6c6;
}
[type='checkbox']:checked:focus {
    background-color: #29b6c6;
}

[type='checkbox']:hover {
    background-color: #29b6c6;
    box-shadow: none;
    cursor: pointer;
}

[type='checkbox']:hover + span {
    background-color: #29b6c6;
    box-shadow: none;
    cursor: pointer;
}