input radio单选框默认样式不大好看,一些设计会对做一些美化,例如下面的美化效果如下:

input radio 美化效果不显示圆圈

html代码:

<li class="k_sex" id="k_sex">
<label class="sex_man sex_check"><input type="radio" name="ks_sex" value="男" checked="checked" /> 男</label>
<label class="sex_woman"><input type="radio" name="ks_sex" value="女" /> 女</label>
<div class="clear"></div>
</li>

css代码:

.k_sex {padding:0.4rem 0 0.2rem 0;}
input[type='radio'] {position:absolute;opacity:0;pointer-events:none;width: auto;}
.k_sex .sex_man,
.k_sex .sex_woman {width:48%;cursor:pointer;display:block;text-align:center;border:#39190a 2px solid;color:#b8968c;height:0.56rem;font-size:0.2rem;}
.k_sex .sex_man {float:left;}
.k_sex .sex_woman {float:left;}
.k_sex .sex_check {background:#39190a;}

js代码:

<script>
$(function () {
  $("#k_sex").find("input").on("click",function(){
    var index = $("#k_sex input").index(this);
    $("#k_sex label").siblings().removeClass("sex_check").eq(index).addClass("sex_check");
  })
});
</script>