原理：首先把input元素隐藏掉，然后用CSS设置label元素(其他元素也可以)的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS
效果预览
html代码
男
女
CSS代码
.radio {
position: relative;
display: inline-block;
margin-right: 12px;
}
.radio input {
width: 15px;
height: 15px;
appearance: none;/*清楚默认样式*/
-webkit-appearance: none;
opacity: 0;
outline: none;
z-index: 8; /*让input层级高于label，使之能选中*/
}
.radio label {
position: absolute;
left: 0;
top: 6px;
width: 15px;
height: 15px;
border: 1px solid #3582E9;
}
.radio input:checked+label::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
/* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
width: 5px;
height: 12px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
}
如果觉得《html怎么设置input多选框 使用CSS3实现input多选框自定义样式》对你有帮助，请点赞、收藏，并留下你的观点哦！
