自定义单选按钮radio样式

表单中input[type="radio"]的样式非常不好看，而且在不同的浏览器中显示的效果也不同；

我们可以采用input和label结合对页面的单选按钮进行样式修改

html:

<div class="female">
    <input type="radio" id="female" class="ui-radio" name="sex" />
    <label for="female">女</label>
</div>
<div class="male">                
    <input type="radio" id="male" class="ui-radio" name="sex" />
    <label for="male">男</label>
</div>

 

css:

//未选中状态、

:root .ui-radio+label{

background:

}

//选中状态

:root .ui-radio:checked+label{

background:

}

以上代码就可以实现对于radio的自定义显示，复选框也同样如此；