利用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