Checkbox style : demo 15

                        .checkbox{
                            width: 50px;
                            padding: 3px 0;
                        }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 1px;
                            top: 1px;
                        }
                        .checkbox label{
                            background: #702020;
                            width: 50px;
                            height: 20px;
                            border-radius: 40px;
                            box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.25);
                            cursor: pointer;
                            position: relative;
                            transition: all 0.25s;
                        }
                        .checkbox label:before{
                            content: "\f00d";
                            color: red;
                            background: #fff;
                            font-family: "Font Awesome 5 Free";
                            font-size: 16px;
                            font-weight: 900;
                            text-align: center;
                            line-height: 25px;
                            width: 25px;
                            height: 25px;
                            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
                            border-radius: 50px;
                            transform: translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transition: all 0.25s;
                        }
                        .checkbox input[type=checkbox]:checked+label{ background: #008040; }
                        .checkbox input[type=checkbox]:checked+label:before{
                            content: "\f00c";
                            color: #fff;
                            background: #00ff80;
                            left: 25px;
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }