<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");});

總結

以上是生活随笔為你收集整理的自定义单选框样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。