改变单选按钮radio的默认样式

默认的radio的样式很丑，那么如何改变其默认的样式呢？
我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。

 

<style>

.choice{  
    position: relative;  
}  
.choice .radio{  
    position: relative;  
    display: inline-block;  
    font-weight: 400;  
    color: #0c4757;  
    padding-left: 25px;  
    cursor: pointer;  
}  
.choice .radio input{  
    position: absolute;  
    left: -9999px;  /*把以前的丑陋样式给放到你看不到的地方*/
}  
.choice .radio i{  
    display: block;  
    position: absolute;  
    top: 6px;  
    left: 0;  
    width: 15px;  
    height: 15px;  
    outline: 0;  
    border: 1px solid #47a8c0;  
    background: #9cd9e8;  
    border-radius: 50%;  
    transition: border-color .3s  
    -webkit-transition: border-color .3s;  
}  
.choice .radio input:checked+i{  
    border-color: #0c4757;  
}  
.choice .radio input+i:after{  
    position: absolute;  
    content: '';  
    top: 3px;  
    left: 3px;  
    width: 9px;  
    height: 9px;  
    border-radius: 50%;  
    background-color: #47a8c0;  
    opacity: 0;  
    transition: opacity .1s;  
    -webkit-transition: opacity .1s;  
}  
.choice .radio input:checked+i:after{  
    opacity: 1;  
}  

</style>




<div class="choice">  
    <label class="radio">在校生<input type="radio" name="radio" value="1" checked><i></i></label>  
    <label class="radio">非在校生<input type="radio" value="2" name="radio"><i></i></label>  
</div>