html部分:
<input id="item2" type="radio" name="item">
<label for="item2"></label>
label   for属性规定与表单元素绑定
radio单选框, 相同的name名字可以达到互斥的作用。
checkbox多选框
ckecked默认被选择

CSS部分:
input[type="radio"] {
opacity: 0;              设置透明度，隐藏原有input样式
}
label {
position: absolute;
left: 90%;
top: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
}
input:checked+label { 相邻同胞选择器，选择被选中的input标签后 第一个label标签［input  和 label标签有共同的父元素］；
background-color: #ff3334;
border: 1px solid #ff3334;
}
css样式会应用在紧随着“勾选的input元素”后面（同级）的“label元素的：after”上。
也就是说，input框如果被用户勾选了，其后面的label元素会有相应的样式变化。
input:checked+label::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg)
}

作者：啾咪啾咪啾
链接：https://www.jianshu.com/p/d3ad2d76f039