利用CSS 修改input=radio的默认样式(改成选择框)

html部分：

<input id="item2" type="radio" name="item">
<label for="item2"></label>

abel for属性规定与表单元素绑定
radio单选框， 相同的name名字可以达到互斥的作用

CSS部分：

input[type="radio"] {
     opacity: 0; //设置透明度，隐藏原有input样式
}
label {
     position: absolute;
     left: 90%;
     top: 10px;
     width: 20px;
     height: 20px;
     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