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;
//任意样式 }