Convert Checkbox to Toggle Switch

CC3EDEBC-4B38-4455-9B47-FD010D48A5CD

Hi all :wave:

Here’s a quick way to convert checkboxes into toggle switches using CSS only. This will work for any checkbox!

CSS

input[type="checkbox"] {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
}
input[type="checkbox"]::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
}
input[type="checkbox"],
input[type="checkbox"]::after {
    transition: all 100ms ease-out;
}
input[type="checkbox"]::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
}
input[type="checkbox"] {
    cursor: default;
}
input[type="checkbox"]:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
}
input[type="checkbox"]:checked {
    background-color: #6e79d6;
}
input[type="checkbox"]:checked::after {
    background-color: #fff;
    left: 13px;
}
input[type="checkbox"]:checked:hover {
    background-color: #535db3 !important;
    transition-duration: 0s;
}
input[type="checkbox"]:checked:hover::after {
    background-color: #fff;
    left: 13px;
}
input[type="checkbox"]:focus:not(.focus-visible) {
    outline: 0;
}

label.text-center.tb-checkbox span {
    margin-left: 10px;
    vertical-align: top;
}
7 Likes