How to get Iphone checkboxes in Internet explorer and edge?

I have the following css:

input.apple-switch {
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 50px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #D9DADC;
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 #fff;
}

input.apple-switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    background: transparent;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}

input.apple-switch:checked {
    box-shadow: inset 20px 0 0 0 #4ed164;
    border-color: #4ed164;
}

input.apple-switch:checked:after {
    left: 20px;
    box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

input[type="checkbox"]:focus{
                outline:0;
            }

HTML:

        <label class="col-xs-12">
            Success
        </label>
        <div class="col-xs-12">
            <input class="apple-switch successChk" type="checkbox" checked="checked">
        </div

This works in chrome but in IE and edge it looks like this:

Css is not my strong side and the code above is something I found.

Is there anything I can do to get the iphone-switch-checkbox

In ie and edge aswell?