如果覺得使用CSS偽類設置樣式太麻煩,或者頁面上選中的樣式太復雜CSS無法模擬,也可以用背景圖去替換樣式
<div class="">
<label><input type="radio" name="1"><i class="spot"></i>123456</label>
<label><input type="radio" name="1"><i class="spot"></i>123456</label>
</div>
<style>
label{
display:inline-block;
width:200px;
height:50px;
line-height:.8rem;
text-align:left;
position: relative;
}
label input{
width: 15px;
height: 15px;
vertical-align: bottom;
margin-right:.1rem;
opacity: 0;
}
.spot{
display:inline-block;
width:17px;
height:17px;
background:url("image/radio.png") no-repeat; /*默認的樣式圖片*/
background-size:16px;
position: absolute;
top:.2rem;
left:0;
z-index:5;
}
input:checked + .spot{
background:url("image/checked.png") no-repeat; /*選中后的樣式圖片*/
background-size:16px;
}
</style>