Пользовательский флажок CSS не работает должным образом в IE11

---

Я работаю над пользовательским флажком, он хорошо работает в chrome, mozilla, safari, но не отображается должным образом в IE

Что я уже пробовал:

<div class="dtl_row">
       <div class="custom_chk_bx inpt_blk">
           <span class="chk_bx">
               <input type="checkbox" id="test1" name="" value="">
               <label for="test1">Compliant With PF(India)</label>
           </span>
           <span class="chk_bx">
               <input type="checkbox" id="test2" name="" value="" checked="checked">
               <label for="test2"> With ESIC(India)</label>
           </span>
       </div>
    </div>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .chk_bx label {
        color: #333;
        font-size: 16px;
        font-weight: 500;
    }

    .custom_chk_bx {
        padding-top: 15px;
    }

    .chk_bx {
        padding-right: 20px;
    }
    /* Base for label styling */
    .custom_chk_bx [type="checkbox"]:not(:checked),
    .custom_chk_bx [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }

    .custom_chk_bx [type="checkbox"]:not(:checked) + label,
    .custom_chk_bx [type="checkbox"]:checked + label {
            position: relative;
            padding-left: 50px;
            cursor: pointer;
            margin-bottom: 0;
        }

            /* checkbox aspect */
    .custom_chk_bx [type="checkbox"]:not(:checked) + label:before,
    .custom_chk_bx [type="checkbox"]:checked + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 23px;
                height: 24px;
                border-style: solid;
                border-width: 2px;
                border-color: rgb( 192, 209, 218 );
                border-radius: 4px;
                box-shadow: none;
            }




            /* checked mark aspect */
    .custom_chk_bx [type="checkbox"]:not(:checked) + label::after,
    .custom_chk_bx [type="checkbox"]:checked + label::after {
                color: #0b8fcf;
                content: "✔";
                font-size: 16px;
                left: 6px;
                line-height: 100%;
                position: absolute;
                top: 8px;
                transition: all 0.2s ease 0s;
            }
            /* checked mark aspect changes */
    .custom_chk_bx [type="checkbox"]:not(:checked) + label:after {
                opacity: 0;
                transform: scale(0);
            }

    .custom_chk_bx [type="checkbox"]:checked + label:after {
                opacity: 1;
                transform: scale(1);
            }

<!-- language: lang-html -->

---