一般情况下，<input type="checkbox">元素（也包括一部分其他input元素）是由操作系统（而非浏览器）进行渲染的。在不同操作系统下，这类特殊元素的样式往往和系统本身的风格一致，和浏览器无关。也正是由于这种机制，开发者无法像一般元素那样使用 CSS 来修饰这类元素。这里介绍一种利用纯 CSS 实现自定义 checkbox 样式的方法。思路很简单：由于控件所对应的label元素是可以点击并切换控件状态的，而label元素的样式又可以自由设定，因此我们可将input元素隐藏，通过label元素实现交互。
HTML 代码如下：
<input type="checkbox" id="checkbox" class="checkbox"/>
<div class="checkbox-wrapper">
<label for="checkbox" class="checkbox-label"></label>
</div>样式一：Metro UI 风格
效果：
CSS 代码如下：
.checkbox-wrapper {
width: 80px;
height: 32px;
position: relative;
display: inline-block;
overflow: hidden;
}
.checkbox {
display: none;
}
.checkbox-label::before,
.checkbox-label::after {
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
position: absolute;
font-weight: bold;
line-height: 32px;
height: 32px;
width: 40px;
text-align: center;
}
.checkbox-label::before {
content: 'ON';
left: -40px;
background: #45b6af;
}
.checkbox-label::after {
content: 'OFF';
right: -40px;
background: #f3565d;
}
.checkbox-label {
display: block;
position: absolute;
left: 0;
width: 40px;
height: 32px;
transition: all .4s ease;
cursor: pointer;
background: #dddddd;
}
.checkbox:checked + .checkbox-wrapper .checkbox-label {
left: 40px;
}样式二：iOS 7 风格
效果：
CSS代码如下：
.checkbox-wrapper {
width: 58px;
height: 32px;
position: relative;
display: inline-block;
background: #ffffff;
border-radius: 16px;
transition: all .3s ease-out;
box-shadow: 0px 0px 0px 2px #ddd;
}
.checkbox {
display: none;
}
.checkbox-label {
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: #ffffff;
border-radius: 16px;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
transition: all .3s ease-out;
}
.checkbox:checked + .checkbox-wrapper {
background: #0bd318;
box-shadow: 0px 0px 0px 2px #0bd318;
}
.checkbox:checked + .checkbox-wrapper .checkbox-label {
left: 26px;
}值得一提的是，这个例子虽然比较完美的还原了 iOS 7 中 UISwitch 控件的外观，但是动画曲线却还有些差距。iOS 7 中使用的是一种名为 String Animation 的动画（该 API 在 iOS 8 中已经公开），仔细看的话可以发现开始滑块移动很快，到后面逐渐变慢，并且结束时还有小幅度的「反弹」效果。这里我们为了方便，使用 ease-out 来模拟。
JSFiddle
点击此处查看本教程在 JSFiddle 的示范代码。