一、案例简介
-
默认的复选框是方形的，有时候项目需求要改为圆形，这时候就很头疼啊，因为自己用css直接改，效果没有任何变化。如下：
-
而且不光是这个问题，为了更人性化，最好是点击文字“苹果”时也能选中或不选中。那这个问题是用
label标签处理的。
-
所以一共涉及两个问题：
点击文字或按钮都会选中，也可以取消。
改变复选框的样式问题。
文章的后面会附上完整代码。
二、案例演示以及讲解过程
1.label标签的使用：https://www.runoob.com/tags/att-label-for.html
<input type="checkbox" name="sex" id="man" value="man" /> <label for="man">男</label>
或者
<label for="man"> <input type="checkbox" name="sex" id="man" value="man" />男 </label>
关键点在于 label 里面的for属性的属性值一定要和复选框控件里面id的属性值保持一致。
2.+ 相邻兄弟选择器
网址：https://www.runoob.com/cssref/sel-element-pluss.html
3.:after选择器
网址：https://www.runoob.com/cssref/sel-element-pluss.html
三、案例代码
1.多选代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*按钮样式*/ .box { position: relative; line-height: 30px; } /* 把默认的样式隐藏掉，我们之后自己写 */ input { display: none; } /* 未选中的样式 */ input[type=checkbox]+span { /* 首先将内联元素转化一下，因为内联元素是无法设置宽高的。 */ display: inline-block; /* 设置成正圆 */ border-radius: 50%; width: 20px; height: 20px; border: 1px solid #999; /* 设置位置 */ position: absolute; top: 5px; left: 0; } /* 选中之后的样式，这里的样式主要是操作的里面的小绿点*/ input[type=checkbox]:checked+span::after { /* 使用结构伪类after,必须要写conten属性 这里面可以换成其他的样式：√、×等等均可 */ content: '●'; /* 对中间小点设置位置，确保在正中间*/ position: absolute; top: -8px; left: 0; /* 设置选中圆的颜色 */ color: #41A863; font-size: 30px; } /* 文本距离左边圆形按钮的距离 */ .txt { margin-left: 30px; } </style> </head> <body> <form action="#"> <h3>（多选题）请选择你喜欢的书籍：</h3> <!--多选框start--> <div class="box"> <label for="book1"> <input type="checkbox" name="book" id="book1" /> <span></span> <span class="txt">《沉默的大多数》——王小波</span> </label> </div> <!--多选框end--> <!-- 以下复制多个 --> <div class="box"> <label for="book2"> <input type="checkbox" name="book" id="book2" /> <span></span> <span class="txt">《法治的细节》——罗翔</span> </label> </div> <div class="box"> <label for="book3"> <input type="checkbox" name="book" id="book3" /> <span></span> <span class="txt">《盗墓笔记》——南派三叔</span> </label> </div> </form> </body> </html>
2、单选代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*按钮样式*/ .box { position: relative; line-height: 30px; } /* 把默认的样式隐藏掉，我们之后自己写 */ input { display: none; } /* 未选中的样式 */ input[type=radio]+span { /* 首先将内联元素转化一下，因为内联元素是无法设置宽高的。 */ display: inline-block; /* 设置成正圆 */ border-radius: 50%; width: 20px; height: 20px; border: 1px solid #999; /* 设置位置 */ position: absolute; top: 5px; left: 0; } /* 选中之后的样式，这里的样式主要是操作的里面的小绿点*/ input[type=radio]:checked+span::after { /* 使用结构伪类after,必须要写conten属性 这里面可以换成其他的样式：√、×等等均可 */ content: '●'; /* 对中间小点设置位置，确保在正中间*/ position: absolute; top: -8px; left: 0; /* 设置选中圆的颜色 */ color: #41A863; font-size: 30px; } /* 文本距离左边圆形按钮的距离 */ .txt { margin-left: 30px; } </style> </head> <body> <form action="#"> <h3>（单选题）请选择你最喜欢的书籍：</h3> <!--单选框start--> <div class="box"> <label for="book1"> <input type="radio" name="book" id="book1" /> <span></span> <span class="txt">《沉默的大多数》——王小波</span> </label> </div> <!--单选框end--> <!-- 以下复制多个 --> <div class="box"> <label for="book2"> <input type="radio" name="book" id="book2" /> <span></span> <span class="txt">《法治的细节》——罗翔</span> </label> </div> <div class="box"> <label for="book3"> <input type="radio" name="book" id="book3" /> <span></span> <span class="txt">《盗墓笔记》——南派三叔</span> </label> </div> </form> </body> </html>
四、总结
需要融会贯通、整体代码不是很多，写完一个，其余复制出来即可。位置、样式均可变成其他样式，看自己的需求。
