Checkbox tick issue in IE browser

custom checkbox tick not working in ie and firefox browser, its shows default tick,how to change default tick into custom tick in ie browser. Please give me some idea!!

Below the following code of checkbox

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    height: 17px;
    width: 17px;
    cursor: pointer;
    position: relative;
    -webkit-transition: .15s;
    border-radius: 5px 5px 5px 0;
    border: 1px solid #d7d7d7;
    vertical-align: middle;
    background-color: #fff;
}

    input[type="checkbox"]:before, input[type="checkbox"]:checked:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1.2em;
        text-align: center;
        color: #656464;
        content: '';


    }

    input[type="checkbox"]:checked:before {
        content: '✔';


    }

/*checkbox code for IE browser*/
::-ms-check {
        cursor: pointer;
        position: relative;
        -webkit-transition: .15s;
        -moz-transition: .15s;
        -ms-transition: .15s;
        border-radius: 5px 5px 5px 0;
        border: 1px solid #d7d7d7;
        vertical-align: middle;
        background-color: #fff;
        color:#656464;

    }


    ::-ms-check:before, ::-ms-check:checked:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1.2em;
        text-align: center;
        color: #656464;
        content: '';
    }

    ::-ms-check:before {
        content: '✔';
    }