一、效果如图
二、实现
修改单选样式
//html
//less
@bf: 108rem;
.radio-wrap{
position: absolute;
top:100/@bf;
right:50/@bf;
height: 70/@bf;
width: 70/@bf;
line-height: 50/@bf;
vertical-align: middle;
input[type="radio"] {
width: 55/@bf;
height: 55/@bf;
opacity: 0;
cursor: pointer;
}
label{
position: absolute;
left: 0;
top: 0;
width: .61rem;
height:.6rem;
border-radius: 50%;
border: 1px solid #999999;
}
input:checked+label {
background: #fde117;
border: 1px solid #999999;
}
input:checked+label::after {
position: absolute;
content: "";
width: .13rem;
height: .3rem;
top: .07rem;
left: .2rem;
background: #fde117;
border: 2px solid #333;
border: 1px solid #333;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}