如何用CSS3美化你的CheckBox（复选框）

作者:课课家教育更新于： 2016-09-22 17:36:43

　　现今社会，不少网站仍然采用传统的默认复选框给用户进行选择，但这些复选框默认的样子真心难看,究其原因，是css很难直接修改复选框的样式。下面小编姐姐将向大家介绍一下用CSS3美化CheckBox（复选框）的方法，力求为你的网页增添一些特色。

　　复选框的标签样式非常容易调整，关键是标签跟复选框之间既相互关联又相对独立。

　　关联之处在于我们可以通过label的for属性让用户单击标签的时候触发复选框的点击行为。

　　独立之处则体现在“input”和“label”和两个标记相互独立，可以分开设置样式。

　　来看看下面这段html代码：

　　复选框的id是sport，然后label通过for属性把sport这个复选框关联起来了，但是checkbox可以单独隐藏。

　　为简便起见，这里不单独定义class，而是直接用ID选择器（#）对checkbox设置样式。

　　而label的样式改起来也相当容易。由于没有定义id，所以此处我们用相邻选择器（+）来设置标签的颜色。

　　注意到我们用了伪类checked让用户在点击标签时变成蓝色。

　　改颜色太简单了，而且也不美观，那我们有办法可以改成下图这种广泛应用于移动端app的滑块复选框吗？

　　把文字改成图形无疑是相当困难的，但是我们可以利用CSS的插入元素功能来实现，也就是伪元素before和after了。

　　当然了，第一步还是先把label设置为块状，然后赋予圆角半径，从而勾勒出滑块槽的轮廓。

　　其中，position:relative是为后面的绝对布局做准备。

　　运行效果如下图所示：

　　现在基本轮廓出来了，标签的文本也没有存在的必要。

　　接下来，就可以用伪元素插入滑块了。需要注意的是此处使用绝对定位。

　　让border-radius等于50%来绘制圆的技巧，相信大家现在都不陌生了。

       运行效果如下图所示：

　　滑块的基本样式出来了，但是少了点质感。

　　有经验的设计师都习惯于使用阴影来加强层次感，此处也不例外。

　　此处我们使用1像素，30%不透明度的黑色阴影。属性名称为box-shadow。

     具体写法如下：

　　运行效果如下图所示，这时候滑槽背景可以改成白色了，表示没选中的状态。

　　如果觉得阴影太过单薄，那么我们可以追加一个尺寸大一点，但颜色淡一点的阴影来加强这个效果。

　　box-shadow支持多个阴影，每个阴影之间用英文逗号隔开。

　　具体调整为：

　　注意到我们给滑槽设置了内阴影inset（默认为outset，外阴影），这是因为滑槽给人的感觉是凹下去的，所以阴影的方向跟滑块不一样。

　　再次运行，效果就好很多了

　　然后我们来制作选中的状态，选中前后的差别在于背景颜色和滑块位置的变化。

　　要为选中状态指定样式，我们用前面讲过的checked伪类来实现。

　　背景颜色不在before上，所以直接应用在#sport+label:checked上即可。

　　而滑块在before上，我们需要这样写：

　　其中，31px通过如下方式算出：

　　滑块位置=滑槽宽度-滑块宽度-1（减1是为了让滑块和滑槽之间保留一个间隙）

　　再次运行，鼠标单击滑块，效果如下图所示：

　　两个状态都好了，最后我们通过CSS3强大的动画功能为两个状态之间设置过渡。

　　使用的是transition属性：

　　4个属性功能完全一样，不同前缀用于兼容不同的浏览器。

　　label元素上的值background0.1s代表要为滑槽的背景颜色添加过渡效果，持续时间为0.1秒。

　　before伪元素上的值left0.1s代表要为滑块的位置添加过渡效果，持续时间为0.1秒。

　　再次运行，过渡效果如图

　　 经过这样的美化之后，CheckBox是不是比默认的要好看不少呢？

      本教程的案例完全是在仿制app流行的复选框样式。实际上，只要你有足够多的创意细胞，就可以在本文的基础上设计出更多更具个性的复选框，并不一定局限于滑块的模式上。

（图1）

（图2）

     当然了，创作多少需要一点灵感，为此小编姐姐还特地从网上搜刮了一些不错的复选框样式供大家欣赏(如上图，图1、图2)。这些样式虽然看起来千奇百怪，但本质都跟本教程的案例大同小异。