自定义单选框样式

	<div class="user_sex">
            <p class="user_sex_span">性别</p>
            <div class="sex">
              <div class="women">
                  <label for="women">女</label>
                  <input type="radio" name="fruit" id="women" />
                  <div class="user-defined">
                      <span class="circle active"></span>
                  </div>
              </div>
              <div class="man">
                  <label for="man">男</label>
                  <input type="radio" name="fruit" id="man" />
                  <div class="user-defined">
                      <span class="circle"></span>
                  </div>
              </div>
            </div>
          </div>

/*性别单选框*/
input{padding: 0; margin: 0; border: 0;outline: none;}
.sex:before { content: ""; display: table; }
.sex:after { content: ""; display: table; clear: both; }
.sex > div { position: relative; float: left;width:50px; height: 35px; line-height:35px; }
.sex > div:last-child { margin-right: 0; }
.sex label { display: block; width: 50px; height:35px; line-height: 35px; cursor: pointer;position: absolute;left: 20px}
.sex input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width:12px; height:12px; cursor: pointer; }
.sex .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left:0px; margin: auto; width:12px; height: 12px; border: 1px solid #f2572c; border-radius: 50%; cursor: pointer; }
.sex .user-defined span.circle  { display: block; width: 8px; height: 8px; margin-top:2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }
.sex .user-defined span.active  { background-color: #f2572c; }
/*性别单选框*/

	    //单选按钮
	    $(".women").on("click",function() {
		    $(".user-defined>span",this).addClass("active");
		    $(this).next().children().last().children().removeClass("active");
		});
		$(".man").on("click",function() {
		    $(".user-defined>span",this).addClass("active");
		    $(this).prev().children().last().children().removeClass("active");
		});