个性化单选框

html:

<input type="radio" name="sex" id="sex-male" class="css-radio" checked="">
<label for="sex-male" class="icon_big css-label-radio radGroup1"></label>
<input type="radio" name="sex" id="sex-female" class="css-radio">
<label for="sex-female" class="icon_big css-label-radio radGroup1"></label>

css：

input.css-radio[type="radio"] {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0px;
    border: 0px none;
}
input.css-radio[type="radio"] + label.css-label-radio {
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 18px;
    background-position: -344px -181px;
}

input.css-radio[type="radio"]:checked + label.css-label-radio {
    background-position: -258px -181px;
}