材料设计切换跨浏览器问题

Question

我试图创建一个材质设计风格开关，正如Kai Waddington在codepen上所展示的那样：http://codepen.io/waddington/pen/BfjiL及以下;通过组合使用标签和复选框，它可以在手柄和开关盒上激活。

但是，该句柄仅显示在Chrome中，而不是IE或Firefox。我不确定原因，并且正在尝试解决代码需要如何更改才能在IE / Firefox中工作，同时保留激活功能并保持纯粹的HTML和CSS。

通过轨道或手柄激活而没有js确保它适用于鼠标，触摸，笔等，而不会过多复杂化，所以我想保持这一点。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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伪类和+相邻兄弟选择器，以便在复选框处于选中状态时重新设置标签及其伪元素的样式： / p>

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

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

最终结果似乎是您之后的效果：

小提琴：http://jsfiddle.net/okfaf61x/4/