标签：
随着现代浏览器的流行，纯CSS设置checkbox也变的很是实用，下面会讲到5种与众不同的checkbox复选框（Demo在文章最下方）。
首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。
/**
* 隐藏默认的checkbox
*/
input[type=checkbox] {
visibility: hidden;
}
checkbox复选框样式一隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。
此复选框风格就像一个解锁滑块，滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮（label标签），将会选中复选框，然后滑块移动到ON位置。
我们开始创建复选框区的HTML。
</pre><section><!-- Checbox One --><h3>Checkbox One</h3><div class="checkboxOne"><input id="checkboxOneInput" type="checkbox" name="" value="1" /> <label for="checkboxOneInput"></label></div></section><pre>
为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做黑色条带和圆角。
/** * Create the slider bar */.checkboxOne { width: 40px; height: 10px; background: #555; margin: 20px 80px; position: relative; border-radius: 3px;}
现在，我们可以把label作为条带上的滑块，我们希望按钮效果是从条带的一侧移动到另一侧，我们可以添加label的过渡。
.checkboxOne label { display: block; width: 16px; height: 16px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: -3px; left: -3px; background: #ccc;}
现在这个滑块在选中（关闭）位置，当我们选中复选框，我们希望有一个反应发生，所以我们可以移动滑块到另一端。我们需要知道，判断复选框被选中，如果是则改变label元素的left属性。
.checkboxOne input[type=checkbox]:checked + label {left: 27px;}
这就是你需要的第一个Checkbox复选框的CSS。
标签：
原文地址：http://www.cnblogs.com/xupeiyu/p/4615711.html
