写在前面
本文参考了
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
最后
结果就是这个样子的
总结
今天水了一篇随笔