一.单选按钮
1.效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/19117cea386908b862c376995ac0bfc1.png)
2.代码
<style>
input{
display: none;
}
label:before{
content: "";
width: 5px;
height: 5px;
display: inline-block;
border: 1px solid red;
border-radius: 50%;
padding: 2px;
}
input:checked+label:before{
background: black;
background-clip:content-box;
}
</style>
</head>
<body>
<input id="man" type="radio" name="gender" checked="checked">
<label for="man">男</label>
<input id="woman" type="radio" name="gender">
<label for="woman">女</label>
</body>
二.复选按钮
1. 效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b4a5e982ac80d8db1b82961297d5a680.png)
2.代码
<style>
input{
display: none;
}
label{
display: inline-block;
width: 10px;
height: 10px;
border:1px solid #ccc;
position: relative;
}
input:checked+label{
border-color: #888;
}
input:checked+label:before{
content: "";
width: 2px;
height: 8px;
display: inline-block;
background: black;
transform:rotate(-30deg);
position: absolute;
top:4px;
left: 0px;
}
input:checked+label:after{
content: "";
width: 2px;
height: 10px;
display: inline-block;
background: black;
transform:rotate(30deg);
position: absolute;
top:0px;
left: 5px;
}
</style>
</head>
<body>
<input id="chinese" type="checkbox" name="cbox">
<label for="chinese"></label>语文
<input id="match" type="checkbox" name="cbox">
<label for="match"></label>数学
<input id="English" type="checkbox" name="cbox">
<label for="English"></label>英语
</body>