Top

个性化化单【复】选框原型实现

UI原型图

方式一、不是兼容性个性化复选框实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>个性化复选框样式</title>
 6     <style type="text/css">
 7         html,body {
 8             font-size: 12px;
 9             font-family: "microsoft yahei";
10         }
11         div, input, label {
12             margin: 0;
13             padding:0;
14         }
15         input[type=checkbox] {
16             -webkit-appearance: none;  /*消除checkbox默认样式*/
17             background: url(images/green.png) -120px 0  no-repeat;
18             height: 22px;
19             vertical-align: middle;
20             width: 22px;
21         }
22         /*未选中hover效果*/
23         input[type=checkbox]:not(:checked):hover {
24             background-position: -144px 0;
25         }
26         /*选中效果*/
27         input[type=checkbox]:checked {
28             background-position: -168px 0;
29         }
30         /*复选框不可用选中效果*/
31         input[type=checkbox][disabled]:checked{
32             background-position: -216px 0;
33         }
34     </style>
35 </head>
36 <body>
37     <div>
38         <input type="checkbox" id="example" />
39         <label for="example">个性化复选框样式</label>
40     </div>
41 </body>
42 </html>
View Code
兼容性

目前只兼容 Webkit 系列浏览器；虽然 Firefox 也实现了替代的 -moz-appearance属性，不过控件原有的背景颜色、边框样式无法修改，暂时也不大好用；
IE 系列暂时不支持该属性，更详细的兼容情况查看 Caniuse/appearance 。因此需要为 IE 浏览器清除掉背景图片的影响：

方式二、兼容性个性化复选框实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>个性化复选框样式</title>
 6     <style type="text/css">
 7         html,body {
 8             font-family: "microsoft yahei";
 9             font-size: 14px;
10         }
11         /*设置父容器*/
12         .checkbox {
13             min-height: 24px;
14             padding-left: 24px;
15             position: relative;
16         }
17         input[type=checkbox] + label:before {
18             background:#fff url(images/green.png) -120px 0 no-repeat;
19             content: ""; /*清除默认复选框*/
20             width: 22px;
21             position: absolute;
22             left: 0;
23             height: 22px;
24             cursor: pointer;
25         }
26 
27         input[type=checkbox] {
28              box-sizing: border-box; 
29              left: 4px; 
30              margin: 0; 
31              padding: 0; 
32              position: absolute; 
33              top: 3px;
34              cursor: pointer;
35         }
36 
37         /*未选中hover效果*/
38         input[type=checkbox]:focus,
39         input[type=checkbox]:not(:checked):hover + label:before {
40             background-position: -144px 0;
41         }
42 
43         /*选中效果:checked*/
44         input[type=checkbox]:checked + label:before {
45             background-position: -168px 0;
46         };
47 
48         /*选中disble效果*/
49         input[type=checkbox][disable]:checked + label:before{
50             background-position: -216px 0;
51         }
52     </style>
53 </head>
54 <body>
55     <div class="checkbox">
56         <input type="checkbox"  name=""  id="example" />
57         <label for="example">个性化复选框样式</label>
58     </div>
59 </body>
60 </html>
View Code

   方式二：优点

   1.正常显示

   2.由于网速，导致图片无法加载选择原生显示 

 

三、扩展：实现圆角按钮效果 如图下

实现源码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圆形动态效果实现</title>
 6     <style type="text/css">
 7         html, body {
 8             font-family: "microsoft yahei";
 9             font-size: 12px;
10         } 
11 12         input[type=checkbox]{
12             height: 12px;
13             width: 12px;
14             vertical-align: middle;
15         }
16 
17         /*绘制圆角矩形*/
18         input[type=checkbox] + label,
19         input[type=checkbox]:not(:checked) + label {
20             background-color: #e0e0e0;
21             border-radius: 24px;
22             display: inline-block;
23             width: 72px;
24             height: 24px;
25             position: relative;
26 
27             text-indent: -999px; /*设置文本内容位置*/
28         }
29 
30         /*绘制圆角矩形部分动态小圆*/
31         input[type=checkbox] + label:after,
32         input[type=checkbox]:not(:checked) + label:after {
33             background-color: #fff;
34             border-radius: 20px;
35             content: "";
36             height: 20px;
37             width: 20px;
38             position: absolute;
39             left: 2px;
40             top: 2px;
41             cursor: pointer;
42         }
43 
44         /*修改选中时圆角矩形背景颜色*/
45         input[type=checkbox]:checked + label {
46             background-color: #0485BF;
47         }
48         /*选中小圆的位置*/
49         input[type=checkbox]:checked + label:after {
50             left: 50px;
51         }
52 
53         /*添加角矩形背景颜色过渡动画效果*/
54         input[type=checkbox] + label,
55         input[type=checkbox]:not(:checked) + label {
56             -webkit-transition:background-color: #fff;
57             transition:background-color 4s;
58         }
59         
60         /*添加选中小圆的位置动画过渡效果*/
61         input[type=checked]:checked {
62             -webkit-transition: left:50px;
63             transition:left 4s;
64         }
65     </style>
66 </head>
67 <body>
68     <div class="checked">
69         <input type="checkbox" id="example">
70         <label for="example">check</label>
71     </div>
72 </body>
73 </html>
View Code

 

案例源码

样式化复选框(Styling Checkbox)

干货－自定义个性化checkbox

posted @ 2016-09-04 00:50  Avenstar  阅读(396)  评论(0)    收藏  举报