Checkbox style : demo 21

                        .checkbox{ display: inline-block; }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 1px;
                            top: 1px;
                        }
                        .checkbox label{
                            width: 50px;
                            height: 31px;
                            border-bottom: 4px solid rgba(234,32,39,0.3);
                            border-radius: 20%;
                            cursor: pointer;
                            display: block;
                            position: relative;
                            z-index: 1;
                            transition: all 0.3s ease;
                        }
                        .checkbox label:before{
                            content: '';
                            background: #EA2027;
                            border-radius: 5px;
                            width: 22px;
                            height: 22px;
                            transform: rotate(45deg);
                            position: absolute;
                            bottom: 2px;
                            left: 4px;
                            transition: all 0.5s ease;
                        }
                        .checkbox input[type=checkbox]:checked+label{
                            border-color: rgba(0,148,50,0.3);
                        }
                        .checkbox input[type=checkbox]:checked+label:before{
                            background: #009432;
                            transform: translateX(20px) rotate(135deg);
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }