自定义选择性别

html:

<div class="label">
    <label for="man" class="radio_label checked">
        <input type="radio" name="sex" id="man" value="1" checked="checked">男
    </label>
    <label for="woman" class="radio_label">
        <input type="radio" name="sex" id="woman" value="2" >女
    </label>
</div>

css:

.label{
    position: absolute;
    width: 386px;
    height: 25px;
    float: left;
    display: inline-block;
    top: 25%;
    left: 143px;
    font-size: 27px;
    line-height: 27px;
}
.radio_label{
    background-repeat: no-repeat;
    -webkit-background-size: 25px 50px;
    background-size: 25px 50px;
    display: inline-block;
    line-height: 25px;
    text-indent:30px;
    margin-right:10px;

}
.radio_label.checked {
    background-position: 0 -25px;
}

.radio_label input[type='radio'] {
    display:none;
}
input::-webkit-input-placeholder{
    color: #917449;
}
input::-webkit-input-placeholder{
    color: #917449;
}
input::-moz-placeholder{
    color: #917449;
}

js:

//选择性别
$("input[type='radio']").click(function(){
    $("input[type='radio'][name='"+$(this).attr('name')+"']").parent().removeClass("checked")
    $(this).parent().addClass("checked");
});