Стиль границы не работает в Internet Explorer 11

Question

Я создал тумблер, который не работает в браузере IE. У меня есть сомнения относительно внешнего вида веб-набора и границы.

Вот рабочий фрагмент моего кода:

.contain {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    background: #d6d6d6;
    border-radius: 20px;
    margin: 10px;
}

.checkbox {
    position: absolute;
    width: 28px;
    height: 28px;
    -webkit-appearance: none;
    background: white;
    border: 1px solid;
    border-radius: 50%;
    top: -5px;
    left: -10px;
    outline: none;
}

.checkbox:checked {
    left: 20px;
}

 <label class="contain" >
    <input type="checkbox" id="checkbox" class="checkbox" />
 </label>

Граница в Chrome нормальная, но в Internet-Explorer граница не применяется.

Answer 1

просто добавьте

-moz-border-radius: 50%;
-webkit-border-radius: 50%;

к классу флажков

Answer 2

Похоже, проблема в элементе .checkbox, вы не указали для него цвет границы, возможно, именно поэтому вы не видите границы.

Вы можете добавить его в конец свойства border, например:

.checkbox {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -5px;
  left: -10px;
  -webkit-appearance: none;
  border: 1px solid red;
  border-radius: 50%;
  outline: none;
  background: white
}

Или вы можете разделить свойство border на свойства border-width, border-style и border-color, например:

.checkbox {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -5px;
  left: -10px;
  -webkit-appearance: none;
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-radius: 50%;
  outline: none;
  background: white
}

Еще одна вещь, которую вы можете попытаться сделать, это сделать границу более толстой, изменив ширину границы (1px) на 2px / 3px.

Удачи.