模拟radio单选按钮

1.页面制作中设计总是会做出好看的单选样式，但是原生radio又太难改变，又想要原生radio的功能

有时会用div来模拟单选功能，但是自己还是想要原生的radio单选功能

最好用的方法便是用label标签来模拟，label标签可以绑定radio，这样点击label就像点击radio一样完全不影响radio的原生功能

html如下：

  <div class="radio-con">
       <input type="radio" name="sex" value="FEMALE" id="female">
        <label for="female" class="radio-label"></label>
 </div>

　　css上：

1.使用opacity: 0;来使radio隐藏

2.虽然看起来隐藏掉了但是位置还是存在的，因此使用的方法是label使用绝对定位脱离文档流，这样就可以假装没有radio的存在，把样式完全写在label上，用js来控制label标签的选中取消状态

css如下：

.radio-con{
   position:relative;
}
.radio-con .radio-label{
    display: inline-block;
    position: absolute;
    top:0;
    left: 0;
    //任意样式
}

　　

转载于:https://www.cnblogs.com/Anne3/p/7852741.html