Решения для дизайна материалов для кросс-браузера

Question

Я пытаюсь создать переключатель стиля материала, как продемонстрировал Кай Уоддингтон на кодефене: http://codepen.io/waddington/pen/BfjiL и ниже; который хорошо работает с активацией как на ручке, так и на коммутационной коробке, путем сочетания меток и использования флажка.

Однако ручка отображается только в Chrome, а не в IE или Firefox. Я не уверен, почему, и я пытаюсь понять, как код должен измениться, чтобы работать в IE/Firefox, сохраняя при этом функции активации и оставаясь как чисто html и CSS.

Активация по дорожке или ручке и без js гарантирует, что она работает на мышь, касание, ручку и т. Д. Без лишних сложностей, поэтому я хотел бы это поддерживать.

.label { 
 
    width: 200px; 
 
    height: 60px; 
 
    background: #303f9f; 
 
    box-shadow: inset 0 0 0 30px #4a4a4a; 
 
    border-radius: 30px; 
 
    display: block; 
 
    top: 50px; 
 
    left: 50px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    transition: all 300ms ease-in 0s; 
 
} 
 
#switch { 
 
    top: 60px; 
 
    position: absolute; 
 
    left: 100px; 
 
} 
 
#switch:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -23px; 
 
    left: -75px; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    background: #303f9f; 
 
    border: none; 
 
    z-index: 2; 
 
    box-shadow: inset 0 0 0 40px #5f5f5f, 0 0 5px 0 #000; 
 
    transition: box-shadow 500ms ease-in 0s, left 300ms ease-in 0s; 
 
} 
 
#switch:checked:before { 
 
    left: 90px; 
 
    box-shadow: inset 0 0 0 0 #303f9f, 0 0 5px 0 #000; 
 
} 
 
#switch:checked + label { 
 
    box-shadow: inset 0 0 0 0 #4a4a4a; 
 
}

<input type="checkbox" id="switch" /> 
 
<label for="switch" class="label"></label>

Answer 1

, я считаю, что проблема здесь в том, что Internet Explorer и Firefox не рассматривают управления вводом как имеющие любое содержание (так как модель содержимого входного элемента является пустой, согласно спецификации) , и поэтому вы не можете разместить ничего до или после, следовательно, контент не будет отображаться через ваши псевдо элементы.

Вы все еще могли бы достичь того же эффекта, используя метку, и лейбла псевдо-элементы:

<input type="checkbox" id="switch" /> 
<label for="switch"></label> 

Далее скрыть вход, и стиль этикетки, а также лейбла ::before элемент:

label { 
    display: block; 
    border-radius: 5em; 
    position: relative; 
    background-color: #F00; 
    width: 15em; height: 5em; 
    transition: background 1s; 
} 

label::before { 
    content: ""; 
    border-radius: 50%; 
    position: absolute; 
    transition: left 1s; 
    display: inline-block; 
    background-color: #F66; 
    top: -.25em; left: -.25em; 
    width: 5.5em; height: 5.5em; 
} 

input { 
    display: none; 
} 

Ласты, мы будем использовать класс :checked псевд и + смежного селектор родственных повторно стиля этикетку и его псевдо-элемент в любой момент флажок находится в зарегистрированном состоянии:

input:checked + label { 
    background: #900; 
} 

input:checked + label::before { 
    left: 9.75em; 
} 

Конечный результат, как представляется, эффект вы после:

Скрипки: http://jsfiddle.net/okfaf61x/4/