2/22 自定义一个复选框

写在前面

　　本文参考了

　　https://www.w3cplus.com/css3/css-secrets/custom-checkboxes.html

　　相当于只是加以注释

　　并自己弄了一个合适自己的复选框

　　在之前的组件上试了一下

使用 label

　　label 是上面作用的呢？

　　以前写了一篇随笔（水笔） https://www.cnblogs.com/WaterMealone/p/14402490.html

　　废话有点多，label 就是通过for属性值找到input的id属性值来绑定input用的

　　所以

　　这次的复选框

　　的html是这个样子的

<input id="checkbox_1" type="checkbox">
<label for="checkbox_1"></label>

　　当然你可以加一点东西来表示这个label标签然后看看ta的作用是什么（ vue )

CSS

 1 /* 复选框 */
 2     input[type="checkbox"]+label::before {
 3         content: "A0";
 4         /* A0 是空格的意思 */
 5         /* content: " ";  */
 6         display: inline-block;
 7         width: 15px;
 8         height: 15px;
 9         border-radius: 3px;
10         border: solid 0.5px rgba(0, 117, 255, 0.4);
11         background: rgb(255, 255, 255);
12         line-height: 15px;
13         margin-right: 10px;       /* 在文字前10px */
14         vertical-align: middle;   /* 为了上下居中对齐 */
15     }
16 
17     input[type="checkbox"]:checked+label::before {
18         /* content: "2713"; */
19         content: "✔";        /*  2713 就是对勾的ascii */
20         text-align: center;   /* 为了左右居中对齐 */
21         font-size: 15px;
22         background: lightpink;
23         /*  改变背景的颜色 */
24         color: aliceblue;
25         /*  改变勾子的颜色 */
26     }
27 
28     input[type="checkbox"] {
29         position: absolute;
30         clip: rect(0, 0, 0, 0);
31         /*  通过切片 让input 从来没有在这个世界上来过 */
32     }
33 
34      /*  加一个 focus 的css */
35     input[type="checkbox"]:focus + label::before {
36         box-shadow: 0 0 1px 1px #58a;
37     }

　　疑问点

　　clip：https://www.cnblogs.com/foxcharon/p/10134122.html

　　+ 是什么选择器：https://www.cnblogs.com/nyw1983/p/11628364.html

　　最后

　　结果就是这个样子的　

总结

　　今天水了一篇随笔

Let it roll

2/22 自定义一个 复选框

2/22 自定义一个复选框