CSS3知识汇总24：自定义单选按钮audio+label

在项目中出现中出现的单选按钮，需要自定义。百度上找了很多方法，都不是很好。这个方法不错，推荐。

<div class="pg_sel_box">

    <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />

    <label for="radio-1-1"></label>男

</div>

.pg_sel_box {

    float: left;

    margin-right: 15px;

    font-size: 14px;

    color: #976835;

    font-weight: bold;

}

.regular-radio {

    display: none;

}

.regular-radio + label {

    -webkit-appearance: none;

    border: 1px solid #976835;

    padding: 9px;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    vertical-align: text-top;

    margin-right: 5px;

}

.regular-radio:checked + label:after {

    content: ' ';

    width: 12px;

    height: 12px;

    border-radius: 50%;

    position: absolute;

    top: 3px;

    background: #976835;

    left: 3px;

}

.regular-radio:checked + label {

    background-color: transparent;

    border: 1px solid #976835;

}