SOURCE

<div class="check-wrap">
    <input type="checkbox" class="checkbox" id="check-1" />
    <label for="check-1">生男孩</label>
    <input type="checkbox" class="checkbox" id="check-2" />
    <label for="check-2">生女孩</label>
</div>

.check-wrap{
    text-align: center;
}
.checkbox{
    position: absolute;
    clip: rect(0,0,0,0);
}
.checkbox[type="checkbox"]:focus + label::before{
    /* box-shadow: 0 0 .6em #06c; */
}
.checkbox[type="checkbox"] + label::before{
    content: '\a0'; 
    display: inline-block;
    margin-right: .3em;
    width: 2em;
    height: 2em;
    border-radius: .3em;
    vertical-align: middle;
    line-height: 2em; /* 关键 */
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: gray;
}
.checkbox[type="checkbox"]:checked + label::before{
    content: '\2713'; /* 对勾 */
    background: black;
}

label{
    margin-right: 40px;
    font-size: 20px;
}