Html 对于不同的浏览器，使用复选框的类似iOS的切换按钮看起来不同

我对网页设计有点陌生。试图创建一个类似iOS的切换按钮，但问题在于它在不同浏览器上的外观。它在不同的浏览器中看起来不同。当我测试它时，它可以在Chrome上正常工作

有人能帮我让它在所有浏览器上看起来都一样吗？对不起，英语坏了

JSIDLE链接：

下面是我尝试过的CSS：

正文{
利润率：30像素；
文本对齐：居中；
}
输入[类型=复选框]，
输入[类型=收音机]{
显示：内联块；
宽度：50px；
高度：30px；
位置：相对位置；
光标：指针；
外观：无；
-webkit外观：无；
-moz外观：无；
盒影：嵌入0px 5px 40px-13px rgba（0,0,0,0.75）；
-webkit盒阴影：插入0px 5px 40px-13px rgba（0,0,0,0.75）；
-moz盒阴影：嵌入0px 5px 40px-13px rgba（0,0,0,0.75）；
-o形盒阴影：嵌入0px 5px 40px-13px rgba（0,0,0,0.75）；
边界半径：15px；
-webkit边界半径：15px；
-moz边界半径：15px；
-o-边界半径：15px；
背景色：#fff；
填充：1px；
边际：0px；
过渡：所有0.3秒放松；
-webkit过渡：所有0.3版本都可以轻松过渡；
-moz转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
变换：比例（1）；
-webkit转换：规模（1）；
/*在这里调整尺寸*/
-moz变换：比例（1）；
-o变换：标度（1）；
}
输入[类型=复选框]：选中，
输入[类型=收音机]：已选中{
盒影：插图0px 0px 0px 20px#53d76a，插图0px 5px 40px-13px rgba（132、132、132、1）；
-网络工具包盒阴影：插入0px 0px 0px 20px#53d76a，插入0px 5px 40px-13px rgba（132、132、132、1）；
-moz盒阴影：插入0px 0px 0px 20px#53d76a，插入0px 5px 40px-13px rgba（132、132、132、1）；
-o形盒阴影：插图0px 0px 0px 20px#53d76a，插图0px 5px 40px-13px rgba（132、132、132、1）；
}
输入[类型=复选框]：在，
输入[类型=收音机]：之后{
内容：“；
位置：绝对位置；
宽度：28px；
高度：28px；
光标：指针；
边界半径：15px；
-webkit边界半径：15px；
-moz边界半径：15px；
-o-边界半径：15px；
盒影：0px2px1pRGBA（0,0,0,0.2）；
-webkit盒阴影：0px 2px 2px 1px rgba（0,0,0,0.2）；
-moz盒阴影：0px 2px 2px 1px rgba（0,0,0,0.2）；
-o盒阴影：0px 2px 2px 1px rgba（0,0,0,0.2）；
背景色：#fff；
/*背景图像：url（../images/toggle.png）；
背景重复：无重复；
背景尺寸：包含*/
过渡：所有0.2秒在0.2秒内缓解；
-webkit过渡：所有0.2秒都在0.2秒中轻松过渡；
-moz转换：所有0.2秒都在0.2秒内缓变；
-o型过渡：所有0.2秒均在0.2秒内缓解；
}
输入[type=“checkbox”]：选中：在，
输入[type=“radio”]：选中：之后{
左：23px；
}
输入[类型=复选框]：焦点，
输入[类型=复选框]：激活，
输入[类型=收音机]：焦点，
输入[类型=无线电]：激活{
大纲：0；
}

复选框：
电台：

输入不应该能够在之前和之后添加psuedo元素，因为它们不是容器（例如，

不能有子元素）

这里的评论中有更多信息：

您可以添加标签以获得相同的效果（这在Firefox和IE9+中适用）：

复选框：
电台：

正文{
利润率：30像素；
文本对齐：居中；
}
输入[类型=复选框]，
输入[类型=收音机]{
显示：无；
}
输入[类型=复选框]+标签，
输入[类型=收音机]+标签{
显示：内联块；
宽度：50px；
高度：30px；
位置：相对位置；
光标：指针；
外观：无；
-webkit外观：无；
-moz外观：无；
盒影：嵌入0px 5px 40px-13px rgba（0,0,0,0.75）；
-webkit盒阴影：插入0px 5px 40px-13px rgba（0,0,0,0.75）；
-moz盒阴影：嵌入0px 5px 40px-13px rgba（0,0,0,0.75）；
-o形盒阴影：嵌入0px 5px 40px-13px rgba（0,0,0,0.75）；
边界半径：15px；
-webkit边界半径：15px；
-moz边界半径：15px；
-o-边界半径：15px；
背景色：#fff；
填充：1px；
边际：0px；
过渡：所有0.3秒放松；
-webkit过渡：所有0.3版本都可以轻松过渡；
-moz转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
变换：比例（1）；
-webkit变换：缩放（1）；/*在此处调整大小*/
-moz变换：比例（1）；
-o变换：标度（1）；
}
输入[类型=复选框]：选中+标签，
输入[类型=收音机]：选中+标签{
盒影：插图0px 0px 0px 20px#53d76a，插图0px 5px 40px-13px rgba（132、132、132、1）；
-网络工具包盒阴影：插入0px 0px 0px 20px#53d76a，插入0px 5px 40px-13px rgba（132、132、132、1）；
-moz盒阴影：插入0px 0px 0px 20px#53d76a，插入0px 5px 40px-13px rgba（132、132、132、1）；
-o形盒阴影：插图0px 0px 0px 20px#53d76a，插图0px 5px 40px-13px rgba（132、132、132、1）；
}
输入[类型=复选框]+标签：之后，
输入[类型=收音机]+标签：之后{
左：0；
内容：“；
位置：绝对位置；
宽度：28px；
高度：28px；
光标：指针；
边界半径：15px；
-webkit边界半径：15px；
-moz边界半径：15px；
-o-边界半径：15px；
盒影：0px2px1pRGBA（0,0,0,0.2）；
-webkit盒阴影：0px 2px 2px 1px rgba（0,0,0,0.2）；
-moz盒阴影：0px 2px 2px 1px rgba（0,0,0,0.2）；
-o盒阴影：0px 2px 2px 1px rgba（0,0,0,0.2）；
背景色：#fff；
/*背景图像：url（../images/toggle.png）；
背景重复：无重复；
背景尺寸：包含*/
过渡：所有0.2秒在0.2秒内缓解；
-webkit过渡：所有0.2秒都在0.2秒中轻松过渡；
-moz转换：所有0.2秒都在0.2秒内缓变；
-o型过渡：所有0.2秒均在0.2秒内缓解；
}
输入[类型=复选框]：选中+标签：之后，
输入[类型=收音机]：选中+标签：之后{
左：23px；
}
输入[类型=复选框]：焦点，
输入[ty]