.main {
            display: block;
            position: relative;
            padding-left: 45px;
            margin-bottom: 15px;
            cursor: pointer;
            font-size: 20px;
        }
          
        /* Hide the default checkbox */
        input[type=checkbox] {
            visibility: hidden;
        }
          
        /* Creating a custom checkbox
        based on demand */
        .geekmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: black;
        }
          
        /* Specify the background color to be
        shown when hovering over checkbox */
        .main:hover input ~ .geekmark {
            background-color: yellow;
        }
          
        /* Specify the background color to be
        shown when checkbox is active */
        .main input:active ~ .geekmark {
            background-color: red;
        }
          
        /* Specify the background color to be
        shown when checkbox is checked */
        .main input:checked ~ .geekmark {
            background-color: green;
        }
          
        /* Checkmark to be shown in checkbox */
        /* It is not be shown when not checked */
        .geekmark:after {
            content: "";
            position: absolute;
            display: none;
        }
          
        /* Display checkmark when checked */
        .main input:checked ~ .geekmark:after {
            display: block;
        }
          
        /* Styling the checkmark using webkit */
        /* Rotated the rectangle by 45 degree and 
        showing only two border to make it look
        like a tickmark */
        .main .geekmark:after {
            left: 8px;
            bottom: 5px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 4px 4px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }