Material 设计切换跨浏览器问题
Material design switch cross browser issues
我正在尝试创建一个 material 设计风格开关，正如 Kai Waddington 在 codepen 上演示的：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>
我认为这里的问题是 Internet Explorer 和 Firefox 不认为输入控件具有任何内容（因为根据规范，输入元素的内容模型是 empty） ，因此，您不能在 之前或之后放置任何内容 ，因此，您的伪元素不会出现任何内容。
您仍然可以使用标签实现相同的效果，并且标签的 pseudo-elements:
<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 伪 class 和 + 相邻兄弟选择器来 re-style 标签及其 pseudo-element复选框处于选中状态：
input:checked + label {
background: #900;
}
input:checked + label::before {
left: 9.75em;
}
end-result 似乎是您想要的效果：
Fiddle: http://jsfiddle.net/okfaf61x/4/
我正在尝试创建一个 material 设计风格开关，正如 Kai Waddington 在 codepen 上演示的：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>
我认为这里的问题是 Internet Explorer 和 Firefox 不认为输入控件具有任何内容（因为根据规范，输入元素的内容模型是 empty） ，因此，您不能在 之前或之后放置任何内容 ，因此，您的伪元素不会出现任何内容。
您仍然可以使用标签实现相同的效果，并且标签的 pseudo-elements:
<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 伪 class 和 + 相邻兄弟选择器来 re-style 标签及其 pseudo-element复选框处于选中状态：
input:checked + label {
background: #900;
}
input:checked + label::before {
left: 9.75em;
}
end-result 似乎是您想要的效果：
Fiddle: http://jsfiddle.net/okfaf61x/4/