美化单选框和复选框

美化单选框：主要运用伪类选择器:checked，设置单选按钮选中时的样式，加号'+'相邻兄弟选择器，选中后面的兄弟节点，background-clip规定背景的绘制区域，值为content-box表示背景被裁剪到内容框

css代码：

label{margin-right:50px;}
.circle{display:inline-block;vertical-align:middle;width:15px;height:15px;border-radius:50%;border:1px solid #ddd;}
input[type='radio']:checked+.circle{padding:2px;background:red;box-sizing:border-box;border-color:red;background-clip:content-box;}

html代码：

<label>
    男
    <input type="radio" hidden name="sex" checked="checked">
    <span class="circle"></span>
</label>
<label>
    女
    <input type="radio" hidden name="sex">
    <span class="circle"></span>
</label>

效果图：