纯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
>
<
div
class
=
"switch "
>
<
input
type
=
"checkbox"
checked>
<
label
>
<
div
class
=
"switch2"
>
<
input
type
=
"checkbox"
>
<
label
>
<
div
class
=
"switch3"
>
<
input
type
=
"checkbox"
>
<
label
><
i
>
<
div
class
=
"switch3"
>
<
input
type
=
"checkbox"
>
<
label
><
i
>
|
上述代码是图示开关的主体容器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，源代码已经包括在其中。