css3 写checkbox 标签单选框和实现类似于多选框的样式改写

实现单选框的效果：
<p class="login-p">
    <span>
        <input type="checkbox" class="checkbox" checked="checked"/>
            <a href="javascript:;">我已阅读并同意《xxx协议》</a>   
    </span>
</p>
css代码：
.form-box .login-p{
    margin: 1rem 0rem 1rem 0rem;
}
.form-box .login-p a{
    color: #555;
    font-size: 1.4rem;
}
.form-box .checkbox{
    -webkit-appearance: none;
        appearance: none;
        width: 1.3rem;
        height: 1.3rem;
        margin: 0;
        cursor: pointer;
        vertical-align: bottom;
        background: #E80000;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        top: -0.2rem;
}
input[type=checkbox]:checked::after