<div class="checkAgreement">
<input type="radio" id="checkSure" class="checkSure">
<label for="checkSure"></label>
</div>
.checkAgreement .checkSure{
opacity: 0;
}
.checkAgreement input[type=radio]:checked+label{
background: #E7862A;
width: .46rem;
height: .46rem;
border-radius: 50%;
border: none;
}
.checkAgreement label{
width: .46rem;
height: .46rem;
border-radius: 50%;
border: 1px solid #999999;
position: absolute;
}
.checkAgreement input[type=radio]:checked+label:after{
content: '';
position: absolute;
width: .25rem;
height: .15rem;
background: 0 0;
top: 0.1rem;
left: 0.08rem;
border: 2px solid #FFFFFF;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
![](https://i-blog.csdnimg.cn/blog_migrate/90d03a6facb5eb264bfd5a2be41a88f9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bc4a62d407e9c661928788b46df686ac.png)