個性化化單【復】選框原型實現

時間 2019-11-25

標籤個性化原型實現简体版

原文原文鏈接

UI原型圖css

方式1、不是兼容性個性化複選框實現html

 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 也實現了替代的 屬性，不過控件原有的背景顏色、邊框樣式沒法修改，暫時也不大好用；
IE 系列暫時不支持該屬性，更詳細的兼容狀況查看 Caniuse/appearance 。所以須要爲 IE 瀏覽器清除掉背景圖片的影響：-moz-appearance

方式2、兼容性個性化複選框實現web

 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.正常顯示app

2.因爲網速，致使圖片沒法加載選擇原生顯示 ide

3、擴展：實現圓角按鈕效果如圖下動畫

實現源碼以下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-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>