当前位置 : 主页 > 网页制作 > css >

使用纯CSS自定义美化radio和checkbox

来源:互联网 收集:自由互联 发布时间:2021-06-13
HTML代码如下所示:index.html 1 ! DOCTYPE HTML 2 html 3 head 4 meta charset ="utf-8" 5 meta http-equiv ="X-UA-Compatible" content ="IE=edge" 6 meta name ="viewport" content ="width=device-width, initial-scale=1" 7 title 演示:使用纯

HTML代码如下所示:index.html

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 <meta name="viewport" content="width=device-width, initial-scale=1">
 7 <title>演示:使用纯CSS美化radio和checkbox</title>
 8 <meta name="keywords" content="css" />
 9 <link rel="stylesheet" type="text/css" href="magic-check.css">
10 <style type="text/css">
11 
12 .demo{width:360px;margin:50px auto 10px auto;padding:10px;}
13 
14 .col{margin-top:20px}
15 .col h4{height:40px;line-height:40px}
16 .opt{height:30px;line-height:24px}
17 </style>
18 
19 </head>
20 
21 <body>
22 
23 
24 <div id="main">
25     <div class="demo">
26         <div class="col">
27           <h4>Checkbox</h4>
28             
29             <div class="opt">
30                 <input class="magic-checkbox" type="checkbox" name="layout" id="c1">
31                 <label for="c1">Normal</label>
32             </div>
33             <div class="opt">
34                 <input class="magic-checkbox" type="checkbox" name="layout" id="c2" checked>
35                 <label for="c2">Checked</label>
36             </div>
37             <div class="opt">
38                 <input class="magic-checkbox" type="checkbox" name="layout" id="c3" value="option2" disabled>
39                 <label for="c3" style="color:#ccc">Disabled</label>
40             </div>
41             <div class="opt">
42                 <input class="magic-checkbox" type="checkbox" name="layout" id="c4" checked disabled>
43                 <label for="c4" style="color:#ccc">Checked && Disabled</label>
44             </div>
45 
46 
47 
48         </div>
49 
50         <div class="col">
51             <h4>Radio</h4>
52             <div class="opt">
53                 <input class="magic-radio" type="radio" name="radio" id="r1" value="option1">
54                 <label for="r1">Normal</label>
55             </div>
56             <div class="opt">
57                 <input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked>
58                 <label for="r2">Checked</label>
59             </div>
60             <div class="opt">
61                 <input class="magic-radio" type="radio" name="radio" id="r3" value="option3" disabled>
62                 <label for="r3" style="color:#ccc">禁用</label>
63             </div>
64             <div class="opt">
65                 <input class="magic-radio" type="radio" id="r4" value="option4" checked disabled>
66                 <label for="r4" style="color:#ccc">Checked && Disabled</label>
67             </div>
68         </div>
69     </div>
70     
71 </div>
72 
73 </body>
74 </html>

 

 

 对应CSS代码:index.css

  1 @keyframes hover-color {
  2   from {
  3     border-color: #c0c0c0; }
  4   to {
  5     border-color: #3e97eb; } }
  6 
  7 .magic-radio,
  8 .magic-checkbox {
  9   position: absolute;
 10   display: none; }
 11 
 12 .magic-radio[disabled],
 13 .magic-checkbox[disabled] {
 14   cursor: not-allowed; }
 15 
 16 .magic-radio + label,
 17 .magic-checkbox + label {
 18   position: relative;
 19   display: block;
 20   padding-left: 30px;
 21   cursor: pointer;
 22   vertical-align: middle; }
 23   .magic-radio + label:hover:before,
 24   .magic-checkbox + label:hover:before {
 25     animation-duration: 0.4s;
 26     animation-fill-mode: both;
 27     animation-name: hover-color; }
 28   .magic-radio + label:before,
 29   .magic-checkbox + label:before {
 30     position: absolute;
 31     top: 0;
 32     left: 0;
 33     display: inline-block;
 34     width: 20px;
 35     height: 20px;
 36     content: ‘‘;
 37     border: 1px solid #c0c0c0; }
 38   .magic-radio + label:after,
 39   .magic-checkbox + label:after {
 40     position: absolute;
 41     display: none;
 42     content: ‘‘; }
 43 
 44 .magic-radio[disabled] + label,
 45 .magic-checkbox[disabled] + label {
 46   cursor: not-allowed;
 47   color: #e4e4e4; }
 48   .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
 49   .magic-checkbox[disabled] + label:hover,
 50   .magic-checkbox[disabled] + label:before,
 51   .magic-checkbox[disabled] + label:after {
 52     cursor: not-allowed; }
 53   .magic-radio[disabled] + label:hover:before,
 54   .magic-checkbox[disabled] + label:hover:before {
 55     border: 1px solid #e4e4e4;
 56     animation-name: none; }
 57   .magic-radio[disabled] + label:before,
 58   .magic-checkbox[disabled] + label:before {
 59     border-color: #e4e4e4; }
 60 
 61 .magic-radio:checked + label:before,
 62 .magic-checkbox:checked + label:before {
 63   animation-name: none; }
 64 
 65 .magic-radio:checked + label:after,
 66 .magic-checkbox:checked + label:after {
 67   display: block; }
 68 
 69 .magic-radio + label:before {
 70   border-radius: 50%; }
 71 
 72 .magic-radio + label:after {
 73   top: 7px;
 74   left: 7px;
 75   width: 8px;
 76   height: 8px;
 77   border-radius: 50%;
 78   background: #3e97eb; }
 79 
 80 .magic-radio:checked + label:before {
 81   border: 1px solid #3e97eb; }
 82 
 83 .magic-radio:checked[disabled] + label:before {
 84   border: 1px solid #c9e2f9; }
 85 
 86 .magic-radio:checked[disabled] + label:after {
 87   background: #c9e2f9; }
 88 
 89 .magic-checkbox + label:before {
 90   border-radius: 3px; }
 91 
 92 .magic-checkbox + label:after {
 93   top: 2px;
 94   left: 7px;
 95   box-sizing: border-box;
 96   width: 6px;
 97   height: 12px;
 98   transform: rotate(45deg);
 99   border-width: 2px;
100   border-style: solid;
101   border-color: #fff;
102   border-top: 0;
103   border-left: 0; }
104 
105 .magic-checkbox:checked + label:before {
106   border: #3e97eb;
107   background: #3e97eb; }
108 
109 .magic-checkbox:checked[disabled] + label:before {
110   border: #c9e2f9;
111   background: #c9e2f9; }

 

原生js修改样式,如需配合React 或者View,则还需要改装

大致样式如下:

网友评论