CSS3 border-radius on toggle input not working in IE11 - html

Question

For some reason my toggle button styles are not working in IE11. The input button should be a green circle but it's showing as a square box with a quite background and black border in IE11:
Here is how it is intended to look:
My code:
.toggle-field {
position: relative;
padding-top: 0.35rem;
}
.toggle-field .Toggle {
padding-left: 75px;
}
.toggle-field .toggle-element {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 34px;
border-radius: 18px;
border: 2px solid #ccc;
}
.toggle-field input {
appearance: none;
display: block;
position: absolute;
left: 4px;
top: 4px;
width: 26px;
height: 26px;
background: #ccc;
border-radius: 15px;
transition: left 117ms ease;
border: none;
}
.toggle-field input:focus + .toggle-element {
border-color: #aaa;
}
.toggle-field b {
position: absolute;
font-weight: normal;
line-height: 34px;
top: 1px;
left: 40px;
font-size: 0.65rem;
}
.toggle-field .Toggle.On input {
left: 38px;
background: #2ea664;
}
.toggle-field .Toggle.On b {
left: 12px;
}
<div class="field toggle-field null">
<label for="button1" class="Toggle On">
<input type="checkbox" id="button1" name="button1" value="on">
<span class="toggle-element"></span>
<b>YES</b> Question goes here
</label>
</div>
Most of what I have read says that I need to have a certain compatibility tag included, which I have:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Not sure what else to do. Has anyone else had this issue before?

Answer 1

I found a different way of doing this that works in IE11.
.toggle-field {
position: relative;
padding-top: 0.35rem;
}
.toggle-field .Toggle {
padding-left: 80px;
}
.toggle-field input {
appearance: none;
display: block;
position: absolute;
left: 6px;
top: 4px;
width: 26px;
height: 26px;
background: #ccc;
border-radius: 15px;
transition: left 117ms ease;
border: none;
}
.toggle-field .toggle-element {
background-color: #fff;
border: 2px solid #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
width: 68px;
height: 32px;
}
.toggle-element:before {
background-color: #ccc;
bottom: 3px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .toggle-element {
background-color: #fff;
}
input:checked + .toggle-element:before {
transform: translateX(34px);
background-color: #2ea664;
}
.toggle-element {
border-radius: 34px;
}
.toggle-element:before {
border-radius: 50%;
}
<div class="field toggle-field null">
<label for="checkbox" class="Toggle On">
<input type="checkbox" id="checkbox" />
<span class="toggle-element"></span>
</label>
</div>