用css实现手机端单选框的样式改变

在手机端默认单选框是没有样式的，要让单选框显示自定义的样式可以用css来实现：
看demo

<ul>
                    <li class="choice">选择</li>
                    <li>
                        <label>男</label>
                        <input type="radio" name="sex" value="男">
                    </li>
                    <li>
                        <label>女</label>
                        <input type="radio" name="sex" value="女">
                    </li>
                </ul>

css中这样设置

.sex li input{
    -webkit-appearance:none;
    vertical-align:top;
    border: 1px solid #ddd;
    display:inline-block;
    width:0.55rem;
    height:0.57rem;
    border-radius:50%;
    float:right;
    position:relative;
    margin-right:0.74rem;
    margin-top:0.375rem;  
}

.sex li input[type='radio']:checked{
    -webkit-appearance:none;
    display:inline-block;
    vertical-align:top;
    width:0.57rem;
    height:0.57rem;
    border-radius:50%;
    border:1px solid #ff6a2e;
    position:relative;
}
.sex li input[type='radio']:checked:after{
    content:'';
    width:0.35rem;
    height:0.35rem;
    position:absolute;
    top:0.09rem;
    left:0.09rem;
    background:#ff6a2e;
    border-radius:50%;
    display:block;
}

.sex是ul外面的父级的名字，这里没有贴出
.sex li input[type=’radio’]:checked:after是单选框被选中后的后面使用的样式