复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
前面三款效果都是灵感来自移动应用程序的滑动选择框效果,在选择和未选择状态之间通过滑动来切换效果,非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签,下面是效果一的 HTML 代码示例:
1
2
3
4
5
6
|
<section title= ".slideOne" >
<div class= "slideOne" >
<input type= "checkbox" value= "None" id= "slideOne" name= "check" checked />
<label for= "slideOne" ></label>
</div>
</section>
|
为了实现圆角和复选框的立体感效果,这里运用了 CSS3 的圆角(border-radius)、盒阴影(box-shadow)、渐变(linear-gradient)以及 CSS3 动画技术。下面是效果一的 CSS 代码示例:
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
|
.slideOne {
width : 50px ;
height : 10px ;
background : #333 ;
margin : 20px auto ;
position : relative ;
-moz-border-radius: 50px ;
-webkit-border-radius: 50px ;
border-radius: 50px ;
-moz-box-shadow: inset 0px 1px 1px rgba( 0 , 0 , 0 , 0.5 ), 0px 1px 0px rgba( 255 , 255 , 255 , 0.2 );
-webkit-box-shadow: inset 0px 1px 1px rgba( 0 , 0 , 0 , 0.5 ), 0px 1px 0px rgba( 255 , 255 , 255 , 0.2 );
box-shadow: inset 0px 1px 1px rgba( 0 , 0 , 0 , 0.5 ), 0px 1px 0px rgba( 255 , 255 , 255 , 0.2 );
}
.slideOne label {
display : block ;
width : 16px ;
height : 16px ;
position : absolute ;
top : -3px ;
left : -3px ;
cursor : pointer ;
background : #fcfff4 ;
background : -moz-linear-gradient( top , #fcfff4 0% , #dfe5d7 40% , #b3bead 100% );
background : -webkit-linear-gradient( top , #fcfff4 0% , #dfe5d7 40% , #b3bead 100% );
background : linear-gradient(to bottom , #fcfff4 0% , #dfe5d7 40% , #b3bead 100% );
-moz-border-radius: 50px ;
-webkit-border-radius: 50px ;
border-radius: 50px ;
-moz-box-shadow: 0px 2px 5px 0px rgba( 0 , 0 , 0 , 0.3 );
-webkit-box-shadow: 0px 2px 5px 0px rgba( 0 , 0 , 0 , 0.3 );
box-shadow: 0px 2px 5px 0px rgba( 0 , 0 , 0 , 0.3 );
-moz-transition: all 0.4 s ease;
-o-transition: all 0.4 s ease;
-webkit-transition: all 0.4 s ease;
transition: all 0.4 s ease;
}
.slideOne input[type=checkbox] {
visibility : hidden ;
}
.slideOne input[type=checkbox]:checked + label {
left : 37px ;
}
|
后面六款效果的交互是我们常见的,使用 CSS3 对浏览器默认的复选框效果进行了美化,并且在各个浏览器中表现一致。HTML 代码都是类似的,这里例举效果五的代码:
1
2
3
4
5
6
7
8
|
<section title= ".roundedTwo" >
<!-- .roundedTwo -->
<div class= "roundedTwo" >
<input type= "checkbox" value= "None" id= "roundedTwo" name= "check" checked />
<label for= "roundedTwo" ></label>
</div>
<!-- end .roundedTwo -->
</section>
|
CSS 代码如下:
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
|
.roundedTwo label {
width : 20px ;
height : 20px ;
position : absolute ;
top : 4px ;
left : 4px ;
cursor : pointer ;
background : -moz-linear-gradient( top , #222222 0% , #45484d 100% );
background : -webkit-linear-gradient( top , #222222 0% , #45484d 100% );
background : linear-gradient(to bottom , #222222 0% , #45484d 100% );
-moz-border-radius: 50px ;
-webkit-border-radius: 50px ;
border-radius: 50px ;
-moz-box-shadow: inset 0px 1px 1px rgba( 0 , 0 , 0 , 0.5 ), 0px 1px 0px white ;
-webkit-box-shadow: inset 0px 1px 1px rgba( 0 , 0 , 0 , 0.5 ), 0px 1px 0px white ;
box-shadow: inset 0px 1px 1px rgba( 0 , 0 , 0 , 0.5 ), 0px 1px 0px white ;
}
.roundedTwo label:after {
content : '' ;
width : 9px ;
height : 5px ;
position : absolute ;
top : 5px ;
left : 4px ;
border : 3px solid #fcfff4 ;
border-top : none ;
border-right : none ;
background : transparent ;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity= 0 );
opacity: 0 ;
-moz-transform: rotate( -45 deg);
-ms-transform: rotate( -45 deg);
-webkit-transform: rotate( -45 deg);
transform: rotate( -45 deg);
}
.roundedTwo label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity= 30 );
opacity: 0.3 ;
}
.roundedTwo input[type=checkbox] {
visibility : hidden ;
}
.roundedTwo input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1 ;
}
|