单选框

CSS

.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="hidden" name="sex" checked="checked">
    <span class="circle"></span> 0
</label>
<label>
    <input type="radio" hidden="hidden" name="sex">
    <span class="circle"></span> 1
</label>

DEMO

复选框

CSS

.square {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

input[type='checkbox']:checked+.square:after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    line-height: 15px;
    display: block;
    color: green;
}

HTML

<label>
    <input type="checkbox" hidden="hidden" ><span class="square"></span>唱
</label>
<label>
    <input type="checkbox" hidden="hidden" ><span class="square"></span>跳
</label>
<label>
    <input type="checkbox" hidden="hidden" ><span class="square"></span>Rap
</label>
<label>
    <input type="checkbox" hidden="hidden" ><span class="square"></span>篮球
</label>

DEMO