Toggle switch presentation in Microsoft Edge - html

Question

I've coded some toggle switches just using CSS (no JS). When previewing them via the Microsoft Explorer programme they come out as the default checkboxes.
I've applied these styles:
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
to the CSS file, however I've been reading that Microsoft Edge doesn't "play by" the WebKit features.
Is there any way around this at all?
.toggle-switch{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
width: 4em;
height: 2em;
border-radius: 3em;
background-color: #DED;
transform: backgrond-color 0.09s ease-in-out;
position: relative;
cursor: pointer;
}
.toggle-switch:checked{
background: #0D0155;
cursor: pointer;
}
.toggle-switch::after{
content: "";
width: 2em;
height:2em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.5);
left: 0;
transition: left 0.5s ease-in-out;
cursor: pointer;
box-shadow: 0 0.1em rgba(0,0,0,0.5);
}
.toggle-switch:checked::after{
left: 2em;
cursor: pointer;
}
<input type="checkbox" class="toggle-switch" checked>
<input type="checkbox" class="toggle-switch">
What it should look like:
What is previews as:

Answer 1

A possible solution would be to style a label instead of styling the input and hide the input. Indeed, you can use the for attribute on the label to refer to the input, so that when you click on it, it toggles the checkbox. Then you won't have any more problems with checkboxes appearing because your input will be in display: none.
Here is an example:
.checkbox {
display: none;
}
.toggle-switch {
width: 4em;
height: 2em;
border-radius: 3em;
background-color: #DED;
transition: background-color 0.09s ease-in-out;
position: relative;
cursor: pointer;
display: inline-block;
}
.checkbox:checked + .toggle-switch {
background: #0D0155;
cursor: pointer;
}
.toggle-switch::after{
content: "";
width: 2em;
height:2em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.5);
left: 0;
transition: left 0.5s ease-in-out;
cursor: pointer;
box-shadow: 0 0.1em rgba(0,0,0,0.5);
}
.checkbox:checked + .toggle-switch::after{
left: 2em;
cursor: pointer;
}
<input type="checkbox" class="checkbox" id="checkbox-id" checked>
<label class="toggle-switch" for="checkbox-id"></label>