<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");});
如果觉得《自定义单选框样式》对你有帮助，请点赞、收藏，并留下你的观点哦！
