Css 材质设计切换跨浏览器问题

我正在尝试创建一个材质设计风格转换，正如Kai Waddington在codepen:和下面演示的那样；通过标签和复选框的组合使用，它可以很好地在手柄和开关盒上激活

但是，句柄仅在Chrome中显示，而不在IE或Firefox中显示。我不知道为什么，我正试图弄清楚代码需要如何更改才能在IE/Firefox中工作，同时保留激活功能并保持纯html和CSS

通过track或handle激活，而不使用js，确保了它在鼠标、触摸、笔等方面的工作不会有太多的过度复杂，所以我想保持这一点

.label{
宽度：200px；
高度：60px；
背景#303f9f；
盒影：插入0 30px#4a4a4a；
边界半径：30px；
显示：块；
顶部：50px；
左：50px；
位置：绝对位置；
z指数：1；
过渡：所有300毫秒在0秒内轻松过渡；
}
#开关{
顶部：60px；
位置：绝对位置；
左：100px；
}
#开关：之前{
内容：“；
位置：绝对位置；
顶部：-23px；
左：-75px；
高度：80px；
宽度：80px；
边界半径：50%；
显示：块；
背景#303f9f；
边界：无；
z指数：2；
框阴影：插入0 0 40px#5f5f，0 0 5px 0#000；
过渡：长方体阴影在0秒内缓和500毫秒，在0秒内缓和300毫秒；
}
#开关：已检查：之前{
左：90px；
框阴影：插入0 0#303f9f，0 0 5px 0#000；
}
#开关：选中+标签{
长方体阴影：插图0#4a4a4a；
}

我相信这里的问题是，Internet Explorer和Firefox没有考虑输入控件有任何内容（因为输入元素的内容模型是空的，每个规格），因此，你不能放置任何东西之前或之后，因此，没有内容出现通过你的伪元素。
使用标签和标签的伪元素仍然可以实现相同的效果：



接下来，隐藏输入并设置标签样式，以及标签的
：：在
元素之前：

标签{
显示：块；
边界半径：5em；
位置：相对位置；
背景色：#F00；
宽度：15em；高度：5em；
过渡：背景1s；
}
标签：：之前{
内容：“；
边界半径：50%；
位置：绝对位置；
过渡：左1秒；
显示：内联块；
背景色：#F66；
顶部：-.25em；左侧：-.25em；
宽度：5.5em；高度：5.5em；
}
输入{
显示：无；
}

最后，当复选框处于选中状态时，我们将使用
：checked
伪类和
+
相邻同级选择器重新设置标签及其伪元素的样式：

输入：选中+标签{
背景：#900；
}
输入：选中+标签：：之前{
左：9.75em；
}

最终的结果似乎就是你所追求的效果：

小提琴：

 
< p>我认为这里的问题是，Internet Explorer和Firefox不认为输入控件有任何内容（因为输入元素的内容模型是空的，每个规格），因此，您不能放置任何东西之前或之后，因此，没有内容出现通过您的伪元素。
使用标签和标签的伪元素仍然可以实现相同的效果：



接下来，隐藏输入并设置标签样式，以及标签的
：：在
元素之前：

标签{
显示：块；
边界半径：5em；
位置：相对位置；
背景色：#F00；
宽度：15em；高度：5em；
过渡：背景1s；
}
标签：：之前{
内容：“；
边界半径：50%；
位置：绝对位置；
过渡：左1秒；
显示：内联块；
背景色：#F66；
顶部：-.25em；左侧：-.25em；
宽度：5.5em；高度：5.5em；
}
输入{
显示：无；
}

最后，当复选框处于选中状态时，我们将使用
：checked
伪类和
+
相邻同级选择器重新设置标签及其伪元素的样式：

输入：选中+标签{
背景：#900；
}
输入：选中+标签：：之前{
左：9.75em；
}

最终的结果似乎就是你所追求的效果：

小提琴：

答案非常好，在定位和布局方面比原始答案更简单，在定位和布局方面比原始答案更简单