切换输入上的CSS3 border-radius在IE11中不起作用

Question

由于某种原因，我的切换按钮样式在IE11中不起作用。输入按钮应该是一个绿色圆圈，但它在IE11中显示为带有相当背景和黑色边框的方框：

以下是它的目的：

我的代码：

data$add2 <- ifelse(data$add2=="", 
                    str_extract(data$add1, "Apt [0-9]{1}|Unit [0-9]{1}"), 
                    data$add2)

.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>

不确定还能做什么。还有其他人以前遇到过这个问题吗？

Answer 1

我发现了一种在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>