关于checkbox 样式的改变 设置自定义样式

 1 <div class="kuai"> //对于每一个模块 用一个div 括起   
//---------------------------------------------------------关系网络头部分 tree-title

 2     <div class="row row-box tree-title"> 
 3         <span class="h4 yjtitle" >关系网路</span> <span class="qiyongSpan">
 4             <label class="ant-checkbox-wrapper"> 
 5                 <span class="ant-checkbox ant-checkbox-checked"> 
 6                     <input type="checkbox" class="ant-checkbox-input" value="" name=""></input>
 7                      <span class="ant-checkbox-inner"></span>
 8                 </span>
 9                 <span>启用</span>
10             </label>
11         </span>
12         <button class="btn btn-info rt" style="margin-top: 0%; margin-right: 2%;" id="shouqi">收起</button>
13         
14     </div>
//--------------------------------------------------------关系网络的主体部分  tree-body

15 16     <div class="tree-body">
//-------------------------------------------每一个二级标题 用cbt-item 

17         <div class="cbt-item">
18             <div class="cbt-item-h">
19                 <label class="ant-checkbox-wrapper"> <span
20                     class="ant-checkbox ant-checkbox-checked"> <input 
21                         type="checkbox" class="ant-checkbox-input" value=""></input> <span
22                         class="ant-checkbox-inner"></span>
23                 </span> <span>数据导入</span>
24                 </label>
25             </div>
26             <div class="cbt-root"></div>//如有三级 有一个就写一个cbt-root 
27         </div>
//----------------------------------------每一个二级标题 用cbt-item

28         <div class="cbt-item">
29             <div class="cbt-item-h">
30                 <label class="ant-checkbox-wrapper"> <span
31                     class="ant-checkbox ant-checkbox-checked"> <input
32                         type="checkbox" class="ant-checkbox-input" value=""></input> <span
33                         class="ant-checkbox-inner"></span>
34                 </span> <span>关联反查</span>
35                 </label>
36             </div>
37             <div class="cbt-root"></div>
38         </div>
39         <div class="cbt-item">
40             <div class="cbt-item-h">
41                 <label class="ant-checkbox-wrapper">
42                   <span
43                     class="ant-checkbox ant-checkbox-checked">
44                      <input type="checkbox" class="ant-checkbox-input" value=""></input>
45                      <span class="ant-checkbox-inner"></span>
46                    </span> 
47                    <span>关联反查</span>
48                 </label>
49    
50             </div>
51             <div class="cbt-root">//三级选项 总体分布
52                 <label class="cbt-root-c ant-checkbox-wrapper">
53                     <span
54                     class="ant-checkbox ant-checkbox-checked">
55                      <input type="checkbox" class="ant-checkbox-input" value=""></input>
56                      <span class="ant-checkbox-inner"></span>
57                    </span> 
58                    <span>总体分布</span>
59                 </label>
60             </div>

 　　　　　　　　<div class="cbt-root"> //三级选项 对象属性统计
52                 <label class="cbt-root-c ant-checkbox-wrapper">
53                     <span
54                     class="ant-checkbox ant-checkbox-checked">
55                      <input type="checkbox" class="ant-checkbox-input" value=""></input>
56                      <span class="ant-checkbox-inner"></span>
57                    </span> 
58                    <span>对象属性统计</span>
59                 </label>
60             </div>

 61 
62 　　　　　　</div>
 63 　　</div>
//--------------------------------------------------------关系网络的主题部分

64 </div>//用div 包裹起来的块

  1 @CHARSET "UTF-8";
  2 .ant-checkbox {
  3     white-space: nowrap;
  4     cursor: pointer;
  5     outline: none;
  6     display: inline-block;
  7     line-height: 1;
  8     position: relative;
  9     vertical-align: text-bottom;
 10 }
 11 
 12 .ant-checkbox-inner {
 13     position: relative;
 14     top: 0;
 15     left: 0;
 16     display: block;
 17     width: 14px;
 18     height: 14px;
 19     border: 1px solid #d9d9d9;
 20     border-radius: 2px;
 21     background-color: #fff;
 22     transition: all .3s;
 23 }
 24 
 25 .ant-checkbox-inner:after {
 26     transform: rotate(45deg) scale(0);
 27     position: absolute;
 28     left: 4px;
 29     top: 1px;
 30     display: table;
 31     width: 5px;
 32     height: 8px;
 33     border: 2px solid #fff;
 34     border-top: 0;
 35     border-left: 0;
 36     content: ‘ ‘;
 37     transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
 38 }
 39 
 40 .ant-checkbox-input {
 41     position: absolute;
 42     left: 0;
 43     z-index: 1;
 44     cursor: pointer;
 45     opacity: 0;
 46     filter: alpha(opacity = 0);
 47     top: 0;
 48     bottom: 0;
 49     right: 0;
 50     width: 100%;
 51     height: 100%;
 52 }
 53 
 54 .ant-checkbox-indeterminate .ant-checkbox-inner:after {
 55     content: ‘ ‘;
 56     transform: scale(1);
 57     position: absolute;
 58     left: 2px;
 59     top: 5px;
 60     width: 8px;
 61     height: 1px;
 62 }
 63 
 64 .ant-checkbox-checked .ant-checkbox-inner:after {
 65     transform: rotate(45deg) scale(1);
 66     position: absolute;
 67     left: 4px;
 68     top: 1px;
 69     display: table;
 70     width: 5px;
 71     height: 8px;
 72     border: 2px solid #fff;
 73     border-top: 0;
 74     border-left: 0;
 75     content: ‘ ‘;
 76     transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
 77 }
 78 
 79 .ant-checkbox-checked .ant-checkbox-inner,.ant-checkbox-indeterminate .ant-checkbox-inner
 80     {
 81     background-color: #108ee9;
 82     border-color: #108ee9;
 83 }
 84 
 85 .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after {
 86     animation-name: none;
 87     border-color: rgba(0, 0, 0, 0.25);
 88 }
 89 
 90 .ant-checkbox-disabled .ant-checkbox-inner {
 91     border-color: #d9d9d9 !important;
 92     background-color: #f3f3f3;
 93 }
 94 
 95 .ant-checkbox-disabled .ant-checkbox-inner:after {
 96     animation-name: none;
 97     border-color: #f3f3f3;
 98 }
 99 
100 .ant-checkbox-disabled+span {
101     color: rgba(0, 0, 0, 0.25);
102     cursor: not-allowed;
103 }
104 
105 .ant-checkbox-wrapper {
106     cursor: pointer;
107     font-size: 12px;
108     display: inline-block;
109 }
110 
111 .ant-checkbox-wrapper
112 :not
113  
114 (
115 :last-child
116  
117 )
118 {
119 margin-right:8px;
120 }
121 .ant-checkbox-wrapper+span,.ant-checkbox+span {
122     padding-left: 8px;
123     padding-right: 8px;
124 }
125 
126 .ant-checkbox-group {
127     font-size: 12px;
128 }
129 
130 .ant-checkbox-group-item {
131     display: inline-block;
132 }
133 
134 @media \0screen {
135     .ant-checkbox-checked .ant-checkbox-inner:before,.ant-checkbox-checked .ant-checkbox-inner:after
136         {
137         font-family: ‘anticon‘;
138         text-rendering: optimizeLegibility;
139         -webkit-font-smoothing: antialiased;
140         -moz-osx-font-smoothing: grayscale;
141         content: "\E632";
142         font-weight: bold;
143         font-size: 8px;
144         border: 0;
145         color: #fff;
146         left: 2px;
147         top: 3px;
148         position: absolute;
149     }
150 }
151 
152 .ant-collapse {
153     background-color: #f7f7f7;
154     border-radius: 4px;
155     border: 1px solid #d9d9d9;
156     border-bottom: 0;
157 }
158 
159 .ant-collapse>.ant-collapse-item {
160     border-bottom: 1px solid #d9d9d9;
161 }
162 
163 .ant-collapse>.ant-collapse-item>.ant-collapse-header {
164     height: 38px;
165     line-height: 38px;
166     padding-left: 32px;
167     color: rgba(0, 0, 0, 0.85);
168     cursor: pointer;
169     position: relative;
170     transition: all .3s;
171 }
172 
173 .ant-collapse>.ant-collapse-item>.ant-collapse-header:active {
174     background-color: #eee !important;
175 }
176 
177 .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow {
178     font-size: 12px;
179     font-size: 9px \9;
180     transform: scale(0.75) rotate(0);
181     /* IE6-IE8 */
182     -ms-filter:
183         "progid:DXImageTransform.Microsoft.Matrix(sizingMethod=‘auto expand‘, M11=1, M12=0, M21=0, M22=1)";
184     zoom: 1;
185     font-style: normal;
186     vertical-align: baseline;
187     text-align: center;
188     text-transform: none;
189     line-height: 1;
190     text-rendering: optimizeLegibility;
191     -webkit-font-smoothing: antialiased;
192     -moz-osx-font-smoothing: grayscale;
193     position: absolute;
194     color: rgba(0, 0, 0, 0.43);
195     display: inline-block;
196     font-weight: bold;
197     line-height: 40px;
198     vertical-align: middle;
199     transition: transform 0.24s;
200     top: 0;
201     left: 16px;
202     /* stylelint-disable declaration-block-no-duplicate-properties */
203     top: 16px \9;
204     left: 0 \9;
205     /* stylelint-enable declaration-block-no-duplicate-properties */
206 }
207 
208 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow {
209     filter: none;
210 }
211 
212 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow {
213     font-size: 12px;
214 }
215 
216 .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow:before {
217     display: block;
218     font-family: "anticon" !important;
219 }
220 
221 .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow:before {
222     content: "\E61F";
223 }
224 
225 .ant-collapse-anim-active {
226     transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
227 }
228 
229 .ant-collapse-content {
230     overflow: hidden;
231     color: rgba(0, 0, 0, 0.65);
232     padding: 0 16px;
233     background-color: #fff;
234 }
235 
236 .ant-collapse-content>.ant-collapse-content-box {
237     padding-top: 16px;
238     padding-bottom: 16px;
239 }
240 
241 .ant-collapse-content-inactive {
242     display: none;
243 }
244 
245 .ant-collapse-item:last-child>.ant-collapse-content {
246     border-radius: 0 0 4px 4px;
247 }
248 
249 .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded="true"] .arrow
250     {
251     display: inline-block;
252     font-size: 12px;
253     font-size: 9px \9;
254     transform: scale(0.75) rotate(90deg);
255     /* IE6-IE8 */
256     -ms-filter:
257         "progid:DXImageTransform.Microsoft.Matrix(sizingMethod=‘auto expand‘, M11=0.00000000000000006123, M12=-1, M21=1, M22=0.00000000000000006123)";
258     zoom: 1;
259 }
260 
261 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded="true"] .arrow
262     {
263     filter: none;
264 }
265 
266 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded="true"] .arrow
267     {
268     font-size: 12px;
269 }
270 
271 .ant-collapse-borderless {
272     background-color: #fff;
273     border: 0;
274 }
275 
276 .ant-collapse-borderless>.ant-collapse-item-active {
277     border: 0;
278 }
279 
280 .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-content {
281     background-color: transparent;
282     border-top: 1px solid #d9d9d9;
283 }
284 
285 .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-header {
286     transition: all .3s;
287 }
288 
289 .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-header:hover {
290     background-color: #f7f7f7;
291 }
292 
293 .ant-calendar-picker-container {
294     position: absolute;
295     z-index: 1050;
296 }
297 
298 .ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topLeft,.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topRight,.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topLeft,.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topRight
299     {
300     animation-name: antSlideDownIn;
301 }
302 
303 .ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomLeft,.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomRight,.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomLeft,.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomRight
304     {
305     animation-name: antSlideUpIn;
306 }
307 
308 .ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topLeft,.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topRight
309     {
310     animation-name: antSlideDownOut;
311 }
312 
313 .ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomLeft,.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomRight
314     {
315     animation-name: antSlideUpOut;
316 }
317 
318 .ant-calendar-picker {
319     position: relative;
320     display: inline-block;
321     outline: none;
322     font-size: 12px;
323     transition: opacity 0.3s;
324 }
325 
326 .ant-calendar-picker-input {
327     outline: none;
328 }
329 
330 .ant-calendar-picker
331 :hover
332  
333 .ant-calendar-picker-input
334 :not
335  
336 (
337 [
338 disabled
339 ]
340  
341 )
342 {
343 border-color
344 :
345  
346 #108ee9
347 ;
348 
349 
350 }
351 .ant-calendar-picker-clear {
352     opacity: 0;
353     pointer-events: none;
354     z-index: 1;
355     position: absolute;
356     right: 7px;
357     background: #fff;
358     top: 50%;
359     font-size: 12px;
360     color: rgba(0, 0, 0, 0.25);
361     width: 14px;
362     height: 14px;
363     margin-top: -7px;
364     line-height: 14px;
365     cursor: pointer;
366     transition: color 0.3s, opacity 0.3s;
367 }
368 
369 .ant-calendar-picker-clear:hover {
370     color: rgba(0, 0, 0, 0.43);
371 }
372 
373 .ant-calendar-picker:hover .ant-calendar-picker-clear {
374     opacity: 1;
375     pointer-events: auto;
376 }
377 
378 .ant-calendar-picker-icon {
379     position: absolute;
380     user-select: none;
381     transition: all .3s;
382     width: 12px;
383     height: 12px;
384     line-height: 12px;
385     right: 8px;
386     color: rgba(0, 0, 0, 0.43);
387     top: 50%;
388     margin-top: -6px;
389 }
390 
391 .ant-calendar-picker-icon:after {
392     content: "\E6BB";
393     font-family: "anticon";
394     font-size: 12px;
395     color: rgba(0, 0, 0, 0.43);
396     display: inline-block;
397     line-height: 1;
398     vertical-align: bottom;
399 }
400 
401 .ant-calendar {
402     position: relative;
403     outline: none;
404     width: 231px;
405     border: 1px solid #fff;
406     list-style: none;
407     font-size: 12px;
408     text-align: left;
409     background-color: #fff;
410     border-radius: 4px;
411     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
412     background-clip: padding-box;
413     line-height: 1.5;
414 }
415 
416 .ant-calendar-input-wrap {
417     height: 34px;
418     padding: 6px;
419     border-bottom: 1px solid #e9e9e9;
420 }
421 
422 .ant-calendar-input {
423     border: 0;
424     width: 100%;
425     cursor: auto;
426     outline: 0;
427     height: 22px;
428     color: rgba(0, 0, 0, 0.65);
429 }
430 
431 .ant-calendar-week-number {
432     width: 286px;
433 }
434 
435 .ant-calendar-week-number-cell {
436     text-align: center;
437 }
438 
439 .ant-calendar-header {
440     height: 34px;
441     line-height: 34px;
442     text-align: center;
443     user-select: none;
444     border-bottom: 1px solid #e9e9e9;
445 }
446 
447 .ant-calendar-header a:hover {
448     color: #49a9ee;
449 }
450 
451 .ant-calendar-header .ant-calendar-century-select,.ant-calendar-header .ant-calendar-decade-select,.ant-calendar-header .ant-calendar-year-select,.ant-calendar-header .ant-calendar-month-select
452     {
453     padding: 0 2px;
454     font-weight: bold;
455     display: inline-block;
456     color: rgba(0, 0, 0, 0.65);
457     line-height: 34px;
458 }
459 
460 .ant-calendar-header .ant-calendar-century-select-arrow,.ant-calendar-header .ant-calendar-decade-select-arrow,.ant-calendar-header .ant-calendar-year-select-arrow,.ant-calendar-header .ant-calendar-month-select-arrow
461     {
462     display: none;
463 }
464 
465 .ant-calendar-header .ant-calendar-prev-century-btn,.ant-calendar-header .ant-calendar-next-century-btn,.ant-calendar-header .ant-calendar-prev-decade-btn,.ant-calendar-header .ant-calendar-next-decade-btn,.ant-calendar-header .ant-calendar-prev-month-btn,.ant-calendar-header .ant-calendar-next-month-btn,.ant-calendar-header .ant-calendar-prev-year-btn,.ant-calendar-header .ant-calendar-next-year-btn
466     {
467     position: absolute;
468     top: 0;
469     color: rgba(0, 0, 0, 0.43);
470     font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei",
471         "Microsoft Sans Serif", sans-serif;
472     padding: 0 5px;
473     font-size: 16px;
474     display: inline-block;
475     line-height: 34px;
476 }
477 
478 .ant-calendar-header .ant-calendar-prev-century-btn,.ant-calendar-header .ant-calendar-prev-decade-btn,.ant-calendar-header .ant-calendar-prev-year-btn
479     {
480     left: 7px;
481 }
482 
483 .ant-calendar-header .ant-calendar-prev-century-btn:after,.ant-calendar-header .ant-calendar-prev-decade-btn:after,.ant-calendar-header .ant-calendar-prev-year-btn:after
484     {
485     content: ‘\AB‘;
486 }
487 
488 .ant-calendar-header .ant-calendar-next-century-btn,.ant-calendar-header .ant-calendar-next-decade-btn,.ant-calendar-header .ant-calendar-next-year-btn
489     {
490     right: 7px;
491 }
492 
493 .ant-calendar-header .ant-calendar-next-century-btn:after,.ant-calendar-header .ant-calendar-next-decade-btn:after,.ant-calendar-header .ant-calendar-next-year-btn:after
494     {
495     content: ‘\BB‘;
496 }
497 
498 .ant-calendar-header .ant-calendar-prev-month-btn {
499     left: 29px;
500 }
501 
502 .ant-calendar-header .ant-calendar-prev-month-btn:after {
503     content: ‘\2039‘;
504 }
505 
506 .ant-calendar-header .ant-calendar-next-month-btn {
507     right: 29px;
508 }
509 
510 .ant-calendar-header .ant-calendar-next-month-btn:after {
511     content: ‘\203A‘;
512 }
513 
514 .ant-calendar-body {
515     padding: 4px 8px;
516 }
517 
518 .ant-calendar table {
519     border-collapse: collapse;
520     max-width: 100%;
521     background-color: transparent;
522     width: 100%;
523 }
524 
525 .ant-calendar table,.ant-calendar th,.ant-calendar td {
526     border: 0;
527 }
528 
529 .ant-calendar-calendar-table {
530     border-spacing: 0;
531     margin-bottom: 0;
532 }
533 
534 .ant-calendar-column-header {
535     line-height: 18px;
536     width: 33px;
537     padding: 6px 0;
538     text-align: center;
539 }
540 
541 .ant-calendar-column-header .ant-calendar-column-header-inner {
542     display: block;
543     font-weight: normal;
544 }
545 
546 .ant-calendar-week-number-header .ant-calendar-column-header-inner {
547     display: none;
548 }
549 
550 .ant-calendar-cell {
551     padding: 4px 0;
552 }
553 
554 .ant-calendar-date {
555     display: block;
556     margin: 0 auto;
557     color: rgba(0, 0, 0, 0.65);
558     border-radius: 2px;
559     width: 20px;
560     height: 20px;
561     line-height: 18px;
562     border: 1px solid transparent;
563     padding: 0;
564     background: transparent;
565     text-align: center;
566     transition: background 0.3s ease;
567 }
568 
569 .ant-calendar-date-panel {
570     position: relative;
571 }
572 
573 .ant-calendar-date:hover {
574     background: #ecf6fd;
575     cursor: pointer;
576 }
577 
578 .ant-calendar-date:active {
579     color: #fff;
580     background: #49a9ee;
581 }
582 
583 .ant-calendar-today .ant-calendar-date {
584     border-color: #108ee9;
585     font-weight: bold;
586     color: #108ee9;
587 }
588 
589 .ant-calendar-last-month-cell .ant-calendar-date,.ant-calendar-next-month-btn-day .ant-calendar-date
590     {
591     color: rgba(0, 0, 0, 0.25);
592 }
593 
594 .ant-calendar-selected-day .ant-calendar-date {
595     background: #108ee9;
596     color: #fff;
597     border: 1px solid transparent;
598 }
599 
600 .ant-calendar-selected-day .ant-calendar-date:hover {
601     background: #108ee9;
602 }
603 
604 .ant-calendar-disabled-cell .ant-calendar-date {
605     cursor: not-allowed;
606     color: #bcbcbc;
607     background: #f3f3f3;
608     border-radius: 0;
609     width: auto;
610     border: 1px solid transparent;
611 }
612 
613 .ant-calendar-disabled-cell .ant-calendar-date:hover {
614     background: #f3f3f3;
615 }
616 
617 .ant-calendar-disabled-cell-first-of-row .ant-calendar-date {
618     border-top-left-radius: 4px;
619     border-bottom-left-radius: 4px;
620 }
621 
622 .ant-calendar-disabled-cell-last-of-row .ant-calendar-date {
623     border-top-right-radius: 4px;
624     border-bottom-right-radius: 4px;
625 }
626 
627 .ant-calendar-footer-btn {
628     border-top: 1px solid #e9e9e9;
629     text-align: center;
630     display: block;
631     line-height: 38px;
632 }
633 
634 .ant-calendar-footer>div {
635     display: inline-block;
636 }
637 
638 .ant-calendar .ant-calendar-today-btn,.ant-calendar .ant-calendar-clear-btn
639     {
640     display: inline-block;
641     text-align: center;
642     margin: 0 0 0 8px;
643 }
644 
645 .ant-calendar .ant-calendar-today-btn-disabled,.ant-calendar .ant-calendar-clear-btn-disabled
646     {
647     color: rgba(0, 0, 0, 0.25);
648     cursor: not-allowed;
649 }
650 .cbt-item {
651     margin-top: 0.5%;
652     clear: both;
653 }
654 
655 .cbt-root {
656     float: left;
657     margin: 0.5% 0 0.5% 3%;
658 }
659 
660 .ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner,.ant-checkbox-input:focus+.ant-checkbox-inner
661     {
662     border-color: #108ee9;
663     background-color: #108ee9;
664 }
665 
666 .ant-checkbox-checked .ant-checkbox-inner,.ant-checkbox-indeterminate .chose
667     {
668     background-color: #fff;
669 }