正常的多选框
正常的多选框是方形，由于没有多么美观，所以我们把他变成圆形，中间对号变成小圆更加美观。
label标签的使用：
<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的属性值保持一致。
多选代码
<!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>
单选代码
<!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>
