一波CSS的Checkbox复选框样式代码分享

Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。

在本教程中，我们将创建5个不同的选择框，你可以在你的网站上使用它。

查看演示，可以看到我们将要创建的复选框样式。
演示地址

首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。

1. /**  
2.  * 隐藏默认的checkbox  
3.  */  
4. input[type=checkbox] {   
5.  visibility: hidden;   
6. }  

隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。

样式一

此复选框风格就像一个解锁滑块，滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮（label标签），将会选中复选框，然后滑块移动到ON位置。

我们开始创建复选框区的HTML。

1. <section>  
2.   <!-- Checbox One -->  
3.   <h3>Checkbox One</h3>  
4.    <div class="checkboxOne">  
5.     <input type="checkbox" value="1" id="checkboxOneInput" name="" />  
6.     <label for="checkboxOneInput"></label>  
7.    </div>  
8. </section>  

因为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做黑色条带和圆角。

1. /**  
2.  * Create the slider bar  
3.  */  
4. .checkboxOne {   
5.  width: 40px;   
6.  height: 10px;   
7.  background: #555;   
8.  margin: 20px 80px;   
9.  position: relative;   
10.  border-radius: 3px;   
11. }  

现在，我们可以把label作为条带上的滑块，我们希望按钮效果是从条带的一侧移动到另一侧，我们可以添加label的过渡。

1. /**  
2.  * Create the slider from the label  
3.  */  
4. .checkboxOne label {   
5.  display: block;   
6.  width: 16px;   
7.  height: 16px;   
8.  border-radius: 50%;   
9.     
10.  -webkit-transition: all .5s ease;   
11.  -moz-transition: all .5s