Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。
在本教程中，我们将创建5个不同的选择框，你可以在你的网站上使用它。
查看演示，可以看到我们将要创建的复选框样式。
演示地址
首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。
CSS Code复制内容到剪贴板
/**
* 隐藏默认的checkbox
*/
input[type=checkbox] {
visibility: hidden;
}
隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。
样式一
此复选框风格就像一个解锁滑块，滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮（label标签），将会选中复选框，然后滑块移动到ON位置。
我们开始创建复选框区的HTML。
XML/HTML Code复制内容到剪贴板
<section>
<!– Checbox One –>
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
因为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做黑色条带和圆角。
CSS Code复制内容到剪贴板
/**
* Create the slider bar
*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
