纯CSS3打造各式Checkbox开关按钮

纯CSS3打造各式Checkbox开关按钮
来源：mxria.com  时间：2012-09-21

 

图片展示的案例完全通过css3代码实现，未使用到任何图片，是不是超有现实感？咱们现在来看看如何实现这些按钮！ DEMO及代码参见文后链接

利用圆角、阴影、rgba背景颜色将普通的Checkbox改造成为极具真实感的开关，想象一下你平时用到的各式开关，差不多都可以模拟出来哦！！特别提醒的是伪元素:before和:after的使用，如果你还不清楚这一对伪元素的用法，请参考《CSS3伪元素Before和After应用介绍》关于伪元素在CSS3规范的详细描述，请参看《http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements》

下面我们重点介绍实现过程，如下HTML主体代码是按钮容器的内容。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< div class = "switch " >    < input type = "checkbox" >    < label ></ label > </ div >   < div class = "switch " > < input type = "checkbox" checked> < label ></ label > </ div > < div class = "switch2" >       < input type = "checkbox" >      < label ></ label > </ div > < div class = "switch3" >   < input type = "checkbox" >   < label >< i ></ i ></ label > </ div > < div class = "switch3" >   < input type = "checkbox" >   < label >< i ></ i ></ label > </ div >

上述代码是图示开关的主体容器div，switch中包括对应的checkbox和label

下面逐一介绍关键的CSS代码，注意由于用到了很多css3属性，浏览实际效果时请用支持CSS3的浏览器如Chrome、Firefox,本文DEMO在Chrome Version21.0.1180.89中展示。

第一步：input checkbox包装

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

input {        /* 大小设置为完全覆盖容器 */        position : absolute ;        width : 100% ;        height : 100% ;        /* 保证无遮挡，将z-index设置为一个较大的值 */        z-index : 100 ;        /* 隐藏Checkbox，使之看不到，注意这里使用opacity属性，其实不是真正的隐藏，而是完全透明，这样背景就可以很好展示出来 */        opacity: 0 ;        /* 定义鼠标指针 */        cursor : pointer ;   }

第二步：设置容器的大小 switch类来实现，后面的switch2，switch3同样的道理，只是大小略有差别，不单独介绍。

?

1 2 3 4 5 6 7 8 9

.switch {        width : 100px ;        height : 100px ;        position : relative ;   }

第三步：设置label的样式，这个是获得按钮现实感的关键，其作为Button按钮的实际外观效果是通过背景色、圆角边框等来实现的。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.switch label {        display : block ;        width : 100% ;        height : 100% ;        position : relative ;        border-radius: 50% ; /*获得圆形按钮的外观*/        background : #eaeaea ;       /*设置阴影效果，使得看上去更有立体感*/        box-shadow:            0 3px 5px rgba( 0 , 0 , 0 , 0.25 ),            inset 0 1px 0 rgba( 255 , 255 , 255 , 0.3 ),            inset 0 -5px 5px rgba( 100 , 100 , 100 , 0.1 ),            inset 0 5px 5px rgba( 255 , 255 , 255 , 0.3 );   }

第四步：使用伪类 before和after来分别设置checkbox选中前后的外观样式变化

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

.switch label:after {        content : "" ;        position : absolute ;        z-index : -1 ;        top : -8% ;        right : -8% ;        bottom : -8% ;        left : -8% ;        border-radius: inherit;        background : #ddd ; /* 不支持线性渐变属性的背景*/        background : linear-gradient( #ccc , #fff );        box-shadow:            inset 0 2px 1px rgba( 0 , 0 , 0 , 0.15 ),            0 2px 5px rgba( 200 , 200 , 200 , 0.1 );   }   .switch label:before {        content : "" ;        position : absolute ;        width : 20% ;        height : 20% ;        left : 40% ;        top : 40% ;        border-radius: inherit;        background : #969696 ; /* 不支持线性渐变属性的背景 */        background : radial-gradient( 40% 35% , #ccc , #969696 60% );        box-shadow:            inset 0 2px 4px 1px rgba( 0 , 0 , 0 , 0.3 ),            0 1px 0 rgba( 255 , 255 , 255 , 1 ),            inset 0 1px 0 white ;   }

第五步：添加LED效果，使得按钮被选中后呈现出LED灯亮或暗的变化

?

1 2 3 4 5 6 7 8 9 10 11 12

.switch input:checked ~ label { /* 普通按钮*/      background : #e5e5e5 ; /* 不支持线性渐变属性的背景*/      background : linear-gradient( #dedede , #fdfdfd ); }    .switch input:checked ~ label:before { /* LED点亮后的按钮效果 */      background : #25d025 ; /* 不支持线性渐变属性的背景*/      background : radial-gradient( 40% 35% , #5aef5a , #25d025 60% );      box-shadow:          inset 0 3px 5px 1px rgba( 0 , 0 , 0 , 0.1 ),          0 1px 0 rgba( 255 , 255 , 255 , 0.4 ),          0 0 10px 2px rgba( 0 , 210 , 0 , 0.5 );   }

上述5步就完成了对Checkbox按钮的外观样式设定，通过渲染后即可得到具有现实感的开关按钮，怎么样，是不是比较容易？ 其他几个样式的开关按钮原理和步骤类似，只是改变switch的大小以及Label的样式，点击此处查看DEMO，源代码已经包括在其中。